Cubic bezierEasing · steps()

Cubic bezier generator

Shape how an animation speeds up and slows down: drag the two control points, or start from a keyword, and watch it run.

Curve

Timing function type cubic-bezier() steps()

Same curve as the ease keyword.

Presets

CSS keywords first

Compare in motion

Loop

Compare with

Duration

A · your curve

B · linear

The faint dots mark where each ball is at every tenth of the duration.

Your CSS

/* Same curve as the ease keyword */
--ease-custom: cubic-bezier(0.25, 0.1, 0.25, 1);

transition: transform 400ms var(--ease-custom);
animation-timing-function: var(--ease-custom);

Reading an easing curve

The horizontal axis is time and the vertical axis is progress. A steep part of the curve means fast movement, a flat part means slow. The two control points pull the curve: x values must stay between 0 and 1 (time only runs forward), but y values may go below 0 or above 1, which makes the animation overshoot and settle back, like the back easings.

ease-out curves start fast and land gently: good for things entering the screen.
ease-in curves start slowly: good for things leaving.
steps() jumps between fixed positions, for sprite sheets, typewriter effects and ticking clocks. The jump term decides whether the first jump happens at the start, the end, both or neither.

The preview runs only when you press Play. If your system asks for reduced motion, looping is switched off, and the dots on each track show the same movement without animation. Respect that setting on your own site too, with a prefers-reduced-motion media query.

Easing questions

What is the default easing in CSS?

ease, which equals cubic-bezier(0.25, 0.1, 0.25, 1). It accelerates quickly and slows down for a long time at the end.

Why can't x go outside 0 to 1?

The x axis is time. A control point outside that range could make the curve go back in time, so browsers reject the whole value.

Can I make a bounce with cubic-bezier()?

One overshoot, yes. A real bounce changes direction several times, which needs keyframes or the newer linear() function with many points.