Easing Curve

What it's for

An easing curve says how an animation speeds up and slows down. A straight line is steady; a curve that starts flat and ends steep is a slow start. This tool lets you shape the curve, see a ball move along it, and copy the CSS value for transition-timing-function or animation-timing-function.

For example, when a menu slides in and feels too abrupt, try a few curves here and copy the one that feels right.

How to use it

With Curve, drag the two round handles on the graph, or Tab to one and press the arrow keys (0.01 at a time, 0.1 with Shift). The four number boxes hold the same values and are the way to type exact numbers; the two x values must be between 0 and 1, while a y outside 0 to 1 makes the animation overshoot, as the back presets do. The preset menu starts you from ease, ease-in-out and others.

Bounce gives a ball-drop curve, and Steps a staircase; both are written as linear(), a list of points the browser joins up, and Steps also as the shorter steps(). Press Play to run the ball for the Duration, from the first mark on its track to the second; the track is widened so that a curve going past 1 or below 0 carries the ball past a mark without leaving the track. With your device set to reduce motion, the ball stays still and the graph shows the curve. The settings are remembered in this browser.

Example

Choose the ease-out, back preset. The CSS box shows:

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

Press Play: the ball runs past the second mark and settles back on it.

Good to know

The linear() function is newer than cubic-bezier() and steps(): browsers from late 2023 understand it, older ones ignore the line, so give them a fallback before it. A bounce is drawn with about 40 points, so it isn’t perfectly smooth. Handles can be dragged only within a y range of -0.7 to 1.7; type a number outside it if you need one. The ball shows how your browser runs the curve.