Easing curves
Well-paced transitions
Curve
Drag the two points on the graph or type the values. x stays between 0 and 1; y can go beyond for an overshoot effect.
Presets
Animation
With the curve
Linear (reference)
Code
Value
cubic-bezier(0.25, 0.1, 0.25, 1)
Transition
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
About this tool
This editor helps you tune the timing function of a CSS transition or animation. You drag the two control points of a Bézier curve on a graph, or type x1, y1, x2 and y2 directly. x stays between 0 and 1, as CSS requires, while y can go from -0.75 up to 1.75 so you can create anticipation or overshoot effects.
Eleven presets give you a starting point: the CSS keywords linear, ease, ease-in, ease-out and ease-in-out, plus cubic, quart, expo and back curves. A live animation compares your curve with linear motion at durations from 200 ms to 2 s. You can also paste an existing value, then copy the cubic-bezier function or a ready-to-use transition line.
How to use it
- Pick a starting point under "Presets" or paste an existing value into "Paste a value".
- Drag the points on the graph, or fine-tune "Control point 1" and "Control point 2" with the number fields.
- Choose a "Duration" and click "Play the animation" to compare your curve with the linear reference.
- Copy the cubic-bezier "Value" or the "Transition" line and paste it into your stylesheet.
Frequently asked questions
Why is x limited to the 0 to 1 range?
In CSS, the x coordinates of both control points represent time and must stay between 0 and 1, otherwise the cubic-bezier function is invalid. The editor clamps x to that range but lets y go from -0.75 to 1.75.
How do I make a bounce or overshoot effect?
Move a control point above 1 or below 0 on the vertical axis: the element goes past its final position and then settles back. The "Out back" and "In-out back" presets show how it looks.
What can I paste into the input field?
A cubic-bezier(x1, y1, x2, y2) function, with or without the function name, or a CSS keyword: linear, ease, ease-in, ease-out or ease-in-out. If x1 or x2 falls outside 0 to 1, the value is rejected with an error message.
What does the copied Transition line contain?
A declaration such as transition: transform 600ms cubic-bezier(…);, using the duration selected in the tool. It animates the transform property, so replace it with whatever property you actually animate, opacity for example.