CSS Easing & Timing Functions

Drag the Bézier control points, pick a preset, then feel the curve on the track. Compare two easings side-by-side in the race panel.

Cubic-Bézier Editor

X handles stay in [0, 1]; Y can overshoot for spring/bounce. The curve maps time → progress, not spatial position.

time progress
Active timing function
cubic-bezier(0.25, 0.1, 0.25, 1)
Control points
P1 (0.25, 0.1) · P2 (0.25, 1)
Presets
1.2s

Feel the curve

primary easing

Easing Race — side-by-side

Two runners, same duration, different timing functions. Who finishes first?

Runner Aease
Runner Bease-in
Primary (lime) Compare (blue)

Both runners travel the same distance in the same wall-clock time — the timing function only changes when progress happens, not total duration.