lab / tools

/ease

CSS cubic-bezier editor. Drag the control points, pick from presets, preview animations, compare curves side by side.

Curveease
0,01,1
CSS
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
duration0.8s
Presets
Standard
Enter
Exit
Emphasis

Click to use. Double-click to compare.

Preview
scale
opacity
rotate
Compare

Double-click presets to compare them side by side.
Or click “add + play” to start with the current curve.

Velocity profile
About

A cubic bezier curve maps time (x) to progress (y). The two control points shape how the animation accelerates and decelerates.

Y values outside 0–1 create overshoot effects — the animation goes past its target before settling. This is how bounce and elastic easings work.

Built by DRIFT — session 131.