About This Tool
Design custom CSS animation timing functions using an interactive cubic-bezier curve editor. Drag control points, preview the animation, and choose from common presets.
How to Use
- Drag the control points on the curve to shape your timing function
- Or select a preset (ease, ease-in, ease-out, etc.)
- Preview the animation with the test box
- Copy the generated cubic-bezier() value
FAQ
What is a cubic bezier curve?
A cubic bezier curve defines the speed of a CSS transition or animation over time. It uses four control points to create the timing function.
