Easing and Duration
Date: 2026-08-17
How long a motion takes and how its speed changes across that time. Duration is the one people set; easing is the one that determines whether it feels like a physical object or a slide transition from 2003.
Duration is how long an animation runs. Easing is the curve describing its speed at each point.
Nothing in the physical world moves at constant speed — things accelerate and decelerate — so linear motion reads as mechanical, which is why easing matters more than duration for perceived quality.
The curves
LINEAR ────────
constant speed
→ wrong for almost everything
→ correct for: continuous rotation,
a progress bar, a marquee
EASE-OUT ──╱‾‾‾‾
fast start, slow finish
→ ENTRANCES. The default choice
→ arrives quickly, settles gently
→ feels responsive
EASE-IN ‾‾‾‾╲──
slow start, fast finish
→ EXITS
→ sluggish for entrances: the delay
is at the start, where attention is
EASE-IN-OUT ──╱‾‾╲──
slow, fast, slow
→ movement between two visible
positions
→ a panel sliding across the screen
SPRING / BOUNCE
overshoots and settles
→ playful, physical
→ costs time; use sparingly, and
almost never in checkout
Ease-out for entrances is the highest-value rule here. It’s the difference between an interface that feels quick and one that feels like it’s thinking.
In CSS
/* keywords — fine for most cases */
transition: opacity 200ms ease-out;
/* explicit curves — for a system */
--ease-entrance: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);The four control values are two points — (x1, y1, x2, y2) — defining the curve between start and end. x is time, y is progress.
A y value above 1 overshoots, which is how bounce and spring effects are built:
--ease-overshoot:
cubic-bezier(0.34, 1.56, 0.64, 1);Duration by distance and size
The rule that stops durations feeling arbitrary: larger movements need longer durations to feel like one object moving.
small state change 100–150ms
hover, toggle, focus
small movement 200ms
tooltip, dropdown
medium 250–300ms
modal, side panel
large / full screen 300–400ms
exits ~⅔ of the entrance
A modal and a tooltip appearing at the same duration is what makes motion feel inconsistent, even when nobody can say why.
Asymmetry
ENTRANCE 250ms ease-out
EXIT 150ms ease-in
Exits should be faster. The person has already decided; making them watch the dismissal is spending their time on a decision that’s finished.
Choreography
When several things move together:
STAGGER a list appearing item by
item, ~30–50ms apart
→ reads as one connected
action
→ beyond ~6 items it
becomes a wait
SEQUENCE the panel opens, then its
content appears
→ only where the order
explains something
Stagger has a hard ceiling. Twelve items at 50ms is 600ms before the last appears — long enough that the person is waiting for a list they could already read.
Tokenise, don’t decide per component
duration.instant 100ms
duration.fast 150ms
duration.base 250ms
duration.slow 400ms
easing.entrance cubic-bezier(0, 0, .2, 1)
easing.exit cubic-bezier(.4, 0, 1, 1)
easing.standard cubic-bezier(.4, 0, .2, 1)
Per-component values drift immediately and produce an interface where nothing quite matches. Two or three durations and three curves cover almost everything — Design Tokens, Motion and Transitions.
The accessibility requirement
prefers-reduced-motion applies here as everywhere. Reduce duration to near-zero rather than removing the transition, so state changes still happen and the CSS doesn’t need restructuring — Reduced Motion.