It's a mathematical function that defines how a CSS animation accelerates and decelerates over time. The four parameters (x1, y1, x2, y2) describe the control points of a cubic curve.
CSS Cubic Bezier Editor
Draw and visualize easing curves with interactive drag — copy the transition code instantly.
Easing is not just speed — it's the personality of the animation. Cubic-bezier defines with mathematical precision how velocity changes over time.
A cubic Bézier curve is defined by four points: P0 (0,0) and P3 (1,1) are fixed and represent the start and end of the animation. P1 and P2 are the control points you drag. The X axis represents time (0 to 100% of the duration). The Y axis represents animation progress. When the curve rises quickly and decelerates (ease-out), it feels physically natural. When it starts slow and accelerates (ease-in), it simulates something gaining momentum. Curves that exceed Y=1 create overshoot — the element goes past its target and springs back, simulating elasticity.
Drag the control points or adjust values numerically.
- Drag the circular control points on the SVG graph to shape the curve. The first point controls the start, the second controls the end of the acceleration.
- Use the numeric fields for precise fine-tuning of x1, y1, x2, y2 to two decimal places.
- Click 'Play animation' to see the effect in real time, adjust the duration and copy the final CSS.
Sources and references for this tool
These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.