Easing visualize.

Easings make UI feel real.

Linear motion looks robotic because nothing in the physical world starts and stops instantly. Real objects have inertia: they accelerate from rest and decelerate before stopping. Easing functions encode that pattern, and once you've seen the difference between linear and properly eased motion, the linear version reads as wrong every time.

CSS exposes easing as a cubic Bezier curve, parameterised by two control points. The curve maps progress (0 to 1 across the duration) to value (the interpolation factor between start and end). A flat curve means the value barely changes; a steep curve means it changes fast. Asymmetric curves are the most useful for UI: a quick start that decelerates as it lands ("ease-out") feels responsive without overshooting; a slow start that accelerates ("ease-in") suggests something gathering momentum, useful for things leaving the viewport.

The four named CSS keywords (linear, ease, ease-in, ease-out, ease-in-out) cover most cases but are deliberately conservative. Material Design's standard easing cubic-bezier(0.4, 0, 0.2, 1) is the modern default for UI motion: faster than ease-in-out, asymmetric in a way that feels responsive without being jarring. iOS uses a similar curve with slightly different coefficients. Most well-designed motion systems pick three or four reusable easings (fast, slow, emphatic, decelerated) and use them consistently across every transition in the system.

Bezier handles outside the [0, 1] range produce overshoot and undershoot. cubic-bezier(0.68, -0.55, 0.27, 1.55) swings past the target before settling, useful for "bounce" effects on badges and notifications. The cost is that the eye registers the overshoot as deliberate motion; overuse turns the UI into a cartoon. Reserve overshoot easings for moments that should feel celebratory.

Beyond CSS cubic Beziers, modern animation systems support spring physics: Framer Motion, React Spring, the Web Animations API's spring proposal. Springs parameterise motion by stiffness and damping rather than start-and-end shape, which produces motion that responds naturally to interruption. If a user clicks again mid-animation, a spring smoothly redirects without the visible discontinuity that resetting a Bezier would produce. For interactive UI where animations frequently interrupt each other (drag-and-drop, gesture systems), spring physics is the better primitive; for one-shot transitions, Beziers remain the simpler tool. The visualizer on this page handles Beziers; the principles it reveals (easing as the shape of motion, asymmetric curves for responsiveness, overshoot for emphasis) apply equally to springs.