CSS Easing Functions

Drag Bézier control points, feel the curve, compare easings in a race, and explore steps() and linear().

Cubic-Bézier Editor

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

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

Feel the curve

Press Play to animate a ball along the track using the current easing.

primary easing

steps() — stepped motion

steps(n, end) jumps progress in discrete jumps — ideal for sprite sheets and typewriter effects.

Timing function
steps(5, end)
5

linear() — bounce / spring

The modern linear() function approximates complex curves with piecewise linear stops — no JavaScript required.

linear(0, 0.006 0.5%, 0.024 1%, … 1 100%)
linear() bounce

Easing Race — side-by-side

Two runners, same duration, different timing functions. Who reaches the finish first?

Runner Aease-out
Runner Bease-in
Runner A (lime) Runner B (blue)

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