Read a CSS easing curve

The horizontal axis shows elapsed time and the vertical axis shows progress. Both curves start at (0, 0) and end at (1, 1). Their two intermediate control points change how progress evolves between those endpoints.

Linear versus ease-out

linear moves through 50% of the distance at 50% of the time. ease-out decelerates as it arrives, so it has already moved more than halfway when the timeline is halfway done.

Preview an overshoot

Try cubic-bezier(0.42, -0.32, 0.55, 1.4). The motion initially moves slightly backwards and later crosses the end position before settling. The x coordinates must stay between 0 and 1. The y coordinates can sit outside that interval.

Copy the timing function

Align the playback durations first, then scrub to the part of the animation you’re tuning. Use the exported CSS as your transition timing function. Test on the property you plan to animate, since some properties clamp values at their own boundaries.

Compare the curves in MotionAgency →

See the W3C CSS Easing Functions draft for the full definitions.