Design Atlas
한국어
↝ Motion

Easing

이징

The curve that decides how an animation's speed changes over time — linear, ease-in, ease-out and back all feel completely different over the same distance.

Also known as: Timing functionEasing curve
···
html
<div class="race">
  <div class="lane l1"><span class="tag">linear</span><i class="dot"></i></div>
  <div class="lane l2"><span class="tag">ease-in</span><i class="dot"></i></div>
  <div class="lane l3"><span class="tag">ease-out</span><i class="dot"></i></div>
  <div class="lane l4"><span class="tag">ease-in-out</span><i class="dot"></i></div>
  <div class="lane l5"><span class="tag">back</span><i class="dot"></i></div>
</div>
css
.race{position:absolute;inset:16% 12% 8%;display:flex;flex-direction:column;justify-content:space-between}
.lane{position:relative;height:2px;background:var(--line);border-radius:2px}
.tag{position:absolute;left:0;bottom:100%;margin-bottom:4px;font:10px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.02em}
.dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent);animation:run 2.4s infinite}
.l1 .dot{animation-timing-function:linear}
.l2 .dot{animation-timing-function:ease-in;background:var(--accent-2)}
.l3 .dot{animation-timing-function:ease-out;background:var(--accent-3)}
.l4 .dot{animation-timing-function:ease-in-out}
.l5 .dot{animation-timing-function:cubic-bezier(.34,1.56,.64,1);background:var(--accent-2)}
@keyframes run{0%{left:0}45%{left:88%}100%{left:88%}}

Easing is the "acceleration" of an animation. In CSS you set it via transition-timing-function or animation-timing-function, either with a keyword (linear, ease, ease-in, ease-out, ease-in-out) or a cubic-bezier() curve.

Linear feels mechanical. Ease-out (fast start, slow finish) suits things the user triggered — modals appearing, dropdowns opening. Ease-in (slow start, fast finish) suits things leaving the screen. Back overshoots the target and springs back, reading as elastic.

The five lanes below start together over the same distance. Only linear moves at constant speed — the rest differ wildly in arrival time and feel.

When to use

Don't mix easings on one element. Use ease-out for entrances, ease-in for exits, and save back/spring for moments that need emphasis.