Design Atlas
한국어
↝ Motion

Bounce

바운스

An animation that keeps bouncing a few times after reaching its target before settling — mimicking a physical ball.

Also known as: Bounce easingElastic bounce
···
html
<div class="stage2">
  <div class="ground"></div>
  <div class="drop">★</div>
</div>
css
.stage2{position:relative;width:100%;height:100%}
.ground{position:absolute;left:16%;right:16%;bottom:30%;height:2px;background:var(--line)}
.drop{position:absolute;left:50%;bottom:30%;width:50px;height:50px;margin-left:-25px;border-radius:14px;
  display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px;
  animation:bounce 2.4s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes bounce{
  0%{transform:translateY(-120px)}
  38%{transform:translateY(0)}
  50%{transform:translateY(-42px)}
  62%{transform:translateY(0)}
  72%{transform:translateY(-16px)}
  82%{transform:translateY(0)}
  90%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}

Unlike a spring, which computes its motion from physical quantities (stiffness, damping), a bounce is usually hand-placed in keyframes — you decide where each bounce peak lands. The key is that each successive bounce is shorter than the last, so both the keyframe spacing and the height shrink as it goes.

CSS has no built-in "bounce" easing keyword — you either reach for a library curve (like easings.net's easeOutBounce) or write the keyframes by hand.

When to use

Use it when you want a light, playful "pop" — a notification arriving, an icon appearing. It's too playful for serious data like dashboard numbers.