Keyframe Curve Lab

How cubic-bezier() easing works

A CSS cubic-bezier(x1, y1, x2, y2) timing function is a parametric curve with a fixed start point (0, 0) and end point (1, 1). The two control points you drag, P1 and P2, pull the curve's shape between them. For a parameter t from 0 to 1, the curve's position is:

B(t) = (1-t)³ P0 + 3(1-t)² t P1 + 3(1-t) t² P2 + t³ P3

P0 = (0, 0)      -- animation start, fixed
P3 = (1, 1)      -- animation end, fixed
P1 = (x1, y1)    -- draggable, x1 in [0, 1]
P2 = (x2, y2)    -- draggable, x2 in [0, 1]

The x axis is animation time progress, which browsers constrain to [0, 1] since time only moves forward. The y axis is output progress (how far the animated property has moved toward its end value) and is allowed to leave [0, 1] — a y above 1 or below 0 is exactly what produces overshoot and bounce effects, even though this tool's presets don't use them.

Frequently asked questions

What is a cubic-bezier() easing curve?

It's a CSS timing function defined by two control points, cubic-bezier(x1, y1, x2, y2), that maps animation time progress (x, 0 to 1) to output progress (y). It controls how a CSS transition or animation accelerates and decelerates.

Why is x limited to 0–1 but y isn't?

X represents time, which only moves forward from start (0) to end (1), so browsers clamp it to that range. Y represents output progress and is allowed to go below 0 or above 1, which is what produces bounce and overshoot effects.

How do I use the generated curve in CSS?

Copy the cubic-bezier(...) string and use it as the value of transition-timing-function or animation-timing-function, for example: transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

How do the preset keywords map to cubic-bezier() values?

CSS's named easing keywords are shorthands for fixed control points: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1).