Cubic-bezier generator
Drag the two control points on the graph or type the values — the curve and the animation preview update at once, and the ready-made transition with cubic-bezier() appears below.
.element {
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}How to use it
- Pick a preset (
ease,ease-out,easeOutBack…) or start from the default curve. - Drag the red and purple points on the graph, or type
x1,y1,x2,y2in the fields. With the keyboard: focus a point and use the arrow keys (Shift = finer steps). - Set the duration and a reference curve (
linear,ease…), then press “Play”: the blue box follows your curve, the gray one the reference. - Click “Copy” and paste the
transitioninto your stylesheet.
How it works
What cubic-bezier() means
cubic-bezier(x1, y1, x2, y2) describes a Bézier curve that starts at (0, 0) and ends at (1, 1). The horizontal axis is time, the vertical axis is how much of the change is done. The four numbers are the coordinates of two control points: P1 pulls the curve at the beginning, P2 at the end. The steeper the curve, the faster the movement at that moment.
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);Keywords are just ready-made curves
Every timing keyword is a shortcut for a fixed cubic-bezier(): ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), ease-in-out is (0.42, 0, 0.58, 1) and linear is (0, 0, 1, 1). ease is also the default value of transition-timing-function and animation-timing-function.
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* = ease-in-out */Overshoot: y outside 0..1
The x values must stay between 0 and 1, but y may go beyond that range. Then the property overshoots its target and comes back — the “back” effect, like cubic-bezier(0.34, 1.56, 0.64, 1). It works well for transform and scale, but is pointless for properties that cannot leave their range, such as opacity.
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);Where to apply it
Use the curve in transition or animation for a whole animation, or inside @keyframes to give each segment its own curve. For smooth 60 fps motion animate transform and opacity. A single cubic-bezier cannot make several bounces — use keyframes or the linear() function for that.
FAQ
Why must x1 and x2 be between 0 and 1?
The x axis is time, and time cannot run backwards. A cubic-bezier() with x outside 0..1 is invalid, so the browser ignores the whole declaration. The generator clamps x for you.
Can y go below 0 or above 1?
Yes. A y below 0 makes the animation first move the opposite way (anticipation), a y above 1 makes it overshoot the target. You will only see it on numeric properties that accept such values, like transform.
What is the difference between cubic-bezier() and steps()?
cubic-bezier() gives a smooth continuous change, while steps() jumps between a fixed number of positions — used for sprite animation and typewriter effects.
Which easing is best for UI?
As a rule, ease-out suits elements that appear (fast start, soft stop), ease-in suits elements that leave, and ease-in-out suits movement across the screen. Keep UI transitions within 150–400 ms.
