Why Easing Matters More Than Duration in UI Animation

Most people tune an animation by changing its duration. Too slow, cut it from 400ms to 250ms; too abrupt, push it back up. But two transitions with exactly the same duration can feel completely different, one quick and responsive, the other heavy, and the only thing separating them is the timing curve. Easing decides how the motion is distributed across that time, and it does more for how an interface feels than the duration number does.

What the four numbers describe

A cubic-bezier(x1, y1, x2, y2) value draws a curve from the bottom-left corner of a square to the top-right corner. The horizontal axis is time, from the start of the transition to the end. The vertical axis is progress, from the starting value to the final one. Those two corners are fixed. The four numbers place two control handles that bend the curve between them.

Reading the curve is simple once you know what to look at: where it is steep, the property is changing quickly; where it is flat, it is barely moving. A straight diagonal line is linear, the same speed from start to finish. The keyword values are just named curves: ease-out is cubic-bezier(0, 0, 0.58, 1), steep at the start and flat at the end.

Why linear motion looks wrong

Nothing you handle in real life starts and stops instantly. A drawer you pull open speeds up, then slows as it reaches the end of its rails. Linear motion has neither phase: it starts at full speed and stops dead, which reads as mechanical, and on a large movement it can look like the element hit a wall. That is why linear is a poor choice for movement, and why the CSS default for transitions is ease rather than linear.

Linear does have its place, for things that are not supposed to look physical: a progress bar filling at the rate work completes, a spinner rotating continuously, a colour cycling in the background.

Why the curve changes perceived speed

Consider a menu that opens when clicked. With ease-out, most of the movement happens in the first part of the duration: the menu is nearly in place almost immediately, then settles gently. The interface feels like it responded the moment you clicked. With ease-in, the same menu starts slowly and covers most of the distance at the end, so for the first part of the duration almost nothing seems to happen. Both took the same time. Only one felt responsive.

That gives a working rule. Things entering the screen, responding to an action, usually want to start fast and settle: an ease-out shape. Things leaving can start slowly and accelerate away, since nobody is waiting on them: an ease-in shape. Things moving from one place on screen to another suit ease-in-out, slow at both ends.

Where the default keywords stop being enough

The five keywords cover a lot, but they are mild. A design system often wants a stronger ease-out than the built-in one, so motion feels decisive, or a curve that goes slightly past its target and settles back, which reads as springy. Neither is a keyword. Both are just different positions for the two handles, and handle positions are hard to guess from numbers alone: cubic-bezier(0.16, 1, 0.3, 1), the curve this site uses for its own transitions, says little until you see it drawn and watch it move.

That is what Cubic-bezier easing generator is for: drag the two handles, watch the curve run as a real CSS transition next to the browser's own linear and ease, and copy the value. The how-to guide covers building a curve step by step, and this one follows one overshoot animation from start to the bugs it causes.