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.