Easing

Linear animation looks wrong even when everything else is correct. Nothing in the physical world moves at constant velocity. Easing is the mechanism that makes digital motion feel like it obeys physics.

Linear

Linear easing maintains a constant velocity throughout the animation. It feels mechanical, robotic, and wrong for most UI contexts. The exceptions: animations that represent actual linear data (a progress bar advancing as a file uploads should be linear because the underlying process is), animations tied directly to user input such as scroll position or drag distance, and smooth scrolling where constant velocity is expected and correct.

Ease-out (decelerate)

An element that starts fast and decelerates to rest — ease-out — maps to objects entering the scene. Elements that arrive from off-screen, panels that slide in, dropdowns that open: all of these should decelerate into their final position, as if they have mass and are coming to a stop. Ease-out is the natural choice for entering elements. For transitions between stable states — where an element is not entering or exiting — ease-in-out is more common. In CSS: cubic-bezier(0, 0, 0.2, 1).

Ease-in (accelerate)

An element that starts slow and accelerates to its endpoint — ease-in — maps to objects leaving the scene. Elements that exit should feel like they are gaining momentum as they go, not drifting away lazily. Ease-in exits feel purposeful. Ease-out exits feel slow and reluctant. In CSS: cubic-bezier(0.4, 0, 1, 1).

Ease-in-out (standard)

Ease-in-out accelerates from rest and decelerates back to rest — the curve of a pendulum. It is appropriate for elements moving across the screen between two positions, where neither endpoint is an entry from or exit to off-screen. In CSS: cubic-bezier(0.4, 0, 0.2, 1).

Spring easing

Spring physics — where an element overshoots its target and oscillates before settling — cannot be accurately described by a CSS cubic-bezier curve. The cubic-bezier function’s Y-values can exceed 0 and 1 (enabling a slight overshoot past the final position), but the function cannot model multi-oscillation settling — the repeated bounce before coming to rest that characterises real spring behaviour. True spring motion requires a physics-based animation library or the CSS linear() function with many keyframe stops that approximate the spring curve. Spring easing feels the most physically alive of all easing types, because it models how objects with mass actually behave. It is most appropriate for playful, lightweight interactions — not for serious, high-stakes UI.

The takeaway

Assign easing intentionally: ease-out for entering elements, ease-in for exiting elements, ease-in-out for elements moving between positions. Use a small set of named cubic-bezier values defined as design tokens — ease-enter, ease-exit, ease-move — so the motion vocabulary is consistent across the interface.