How to use it
- Drag a Control point 1 or Control point 2 on the graph. Click a point and use the arrow keys for small steps; hold Shift for bigger ones.
- Type exact values in x1 (0 to 1), y1, x2 (0 to 1) and y2 when you need a precise curve. The x values must stay between 0 and 1.
- Press a preset such as ease-in-out, or press Play under Animation preview to see the ball follow the curve.
- Copy the CSS declaration and use it in a transition or an animation.
What the four numbers mean
A cubic Bézier easing curve starts at (0, 0) and ends at (1, 1). Its two control points, (x1, y1) and (x2, y2), set its shape. Along the horizontal axis is the share of the time that has passed, and along the vertical axis is the share of the change that has been made. The CSS Easing Functions specification restricts the x values of the control points to the range 0 to 1, because time cannot run backwards or go past the end.
The y values have no such limit. A y value above 1 or below 0 makes the curve overshoot, so the change goes past its end and comes back, or starts by moving the other way.
cubic-bezier(x1, y1, x2, y2), where x1 and x2 are between 0 and 1The presets and the animation
The keyword 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), as the specification gives them. The linear easing is a straight line, which the curve cubic-bezier(0, 0, 1, 1) also draws.
The ball runs the curve as the timing of an animation, so you see the easing as motion. If your device asks for reduced motion, the animation starts paused, and Play starts it.
- Use a gentle curve such as ease-out for an element that arrives on the page, and ease-in for one that leaves it.
- Keep a transition short, so the easing is felt and not waited for.
Worked example: the progress at half the time
The ease-in-out curve, cubic-bezier(0.42, 0, 0.58, 1), is symmetrical about its centre, so at half the time it has made exactly half the change: the readout shows 0.5000.
The ease curve, cubic-bezier(0.25, 0.1, 0.25, 1), is further along at the same point. At half the time it has made 0.8024 of the change, so it moves fast early on and slows at the end.
Frequently asked questions
What does the ball show?
The ball runs from the left end of the track to the right, and its position follows the curve: the horizontal position is the share of the change made so far. When the curve goes above 1, the ball passes the end of the track and is clipped there.
Why can the x values not go beyond 0 and 1?
The horizontal axis is time, and the curve covers the time from start to end. A time before the start or after the end has no place on the curve, so the specification keeps the x values of the control points between 0 and 1. The y values have no such limit.
What is the difference between ease-in and ease-out?
ease-in starts slowly and speeds up towards the end, while ease-out starts quickly and slows down at the end. The two curves are mirror images of each other, so the same change is read in reverse.
Can I use the value in an animation as well as a transition?
Yes. The same cubic-bezier() value works for animation-timing-function as well as transition-timing-function, so the declaration can be used in either place.
Is anything I drag or type saved or sent to a server?
No. The curve and the animation are made in your browser. Nothing is stored or sent to our server, so copy the declaration before you leave the page.
Sources
Figures and text last checked on Tuesday, November 10, 2026.