1Adjust the four control point values (x1, y1, x2, y2) between 0 and 1
2Or click a preset button (ease, ease-in, ease-out, ease-in-out, linear)
3Set the animation duration with the slider
4Watch the animated preview to see how your easing feels
5Copy the CSS timing function and use it in transitions or animations
Frequently Asked Questions
cubic-bezier() is a CSS function that defines a custom easing curve using four control points. It is used as the value for transition-timing-function and animation-timing-function.
The four values define the two control points P1(x1,y1) and P2(x2,y2) of the curve. X values must be between 0 and 1; Y values can exceed that range to create anticipation or overshoot effects.
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), ease-in-out is cubic-bezier(0.42,0,0.58,1), and linear is cubic-bezier(0,0,1,1).
Yes. Use it as the animation-timing-function in a @keyframes animation or as the transition-timing-function in a CSS transition. The generator outputs the transition-timing-function declaration.