EASING LAB 98.EXE

Drag the pink handles or use the sliders to design a CSS cubic-bezier curve. X is restricted to 0–1; Y can overshoot for springy movement. No data leaves your browser.

X1 Y1 X2 Y2

Edit the curve or choose a preset.

The horizontal axis is elapsed time; the vertical axis is animation progress. The preview uses CSS animation timing. With reduced motion enabled, only the static curve and code are shown.