🎨 Curve Editor
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
📦 Presets
🎬 Animation Preview
1000ms
Visual cubic-bezier curve editor, 30+ presets, live animation preview
A CSS easing function defines how an animation accelerates and decelerates over its duration. cubic-bezier() is the most commonly used custom easing function, defined by 4 control points forming a Bézier curve.
In cubic-bezier(x1, y1, x2, y2), (x1,y1) is the first control point and (x2,y2) is the second. x represents time progress (0-1), y represents animation progress (0-1+). x values must be 0-1, y values can exceed 1.
Common easing functions: ease(0.25,0.1,0.25,1), ease-in(0.42,0,1,1), ease-out(0,0,0.58,1), ease-in-out(0.42,0,0.58,1), linear(0,0,1,1), and many more.
Copy the generated CSS code and use it as the value for transition-timing-function or animation-timing-function.
A CSS easing function defines how an animation accelerates and decelerates over its duration. cubic-bezier() is the most commonly used custom easing function, defined by 4 control points forming a Bézier curve.
In cubic-bezier(x1, y1, x2, y2), (x1,y1) is the first control point and (x2,y2) is the second. x represents time progress (0-1), y represents animation progress (0-1+). x values must be 0-1, y values can exceed 1.
Common easing functions: ease(0.25,0.1,0.25,1), ease-in(0.42,0,1,1), ease-out(0,0,0.58,1), ease-in-out(0.42,0,0.58,1), linear(0,0,1,1), and many more.