Visual cubic-bezier curve editor with preset easings and live animation preview. | No registration · Data never leaves your browser
Zero Dependencies · Works Offline🎨 Curve Editor
📦 Presets
🎬 Animation Preview
❓ FAQ
What is a CSS easing 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.
What do the 4 parameters of cubic-bezier mean?
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.
What are common easing functions?
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.
How to use the generated code?
Copy the generated CSS code and use it as the value for transition-timing-function or animation-timing-function.