About this tool: CSS Cubic Bézier Editor
Create a CSS cubic-bezier easing curve, inspect its control points and copy the transition timing function.
The curve begins at (0,0) and ends at (1,1). Both x control values must lie between 0 and 1; y values can extend outside that range to create overshoot. The diagram includes the control handles and a diagonal linear reference. Copy the result into a CSS transition or animation timing property.
How the calculation works
Worked example
| x₁ | 0.25 |
| y₁ | 0.1 |
| x₂ | 0.25 |
| y₂ | 1 |
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Questions and answers
What does this tool do?
Create a CSS cubic-bezier easing curve, inspect its control points and copy the transition timing function. The curve begins at (0,0) and ends at (1,1). Both x control values must lie between 0 and 1; y values can extend outside that range to create overshoot. The diagram includes the control handles and a diagonal linear reference. Copy the result into a CSS transition or animation timing property.
What affects precision and input format?
The curve begins at (0,0) and ends at (1,1).
Where are the calculations performed?
The calculation runs in your browser. You can use the tool without installing software.
Asted Cloud
Comments (0)
Share your thoughts — please be polite and stay on topic.
Log in to comment