See how
easing moves.
Compare two CSS timing curves at the same duration. Scrub the motion, read the overshoot, and copy the curve you want to use.
CSS easing
cubic-bezier(x₁, y₁, x₂, y₂)Motion preview
Horizontal is time. Vertical is progress.
Compare curves
Use control-point x values from 0 to 1. Negative y values can move the preview backwards, and values above 1 can overshoot.
Why two animations can feel different at the same duration
Timing functions control how quickly progress changes. Compare the first half and the settling portion of each curve to see when the motion speeds up or slows down.
Work through three timing curves →