Advertisement
Cubic Bezier Editor
Design custom easing curves visually. Drag control points to create unique acceleration patterns for your CSS animations and transitions.
Understanding Cubic Bezier
Cubic Bezier curves are defined by four values: cubic-bezier(x1, y1, x2, y2). These control points determine how your animation accelerates and decelerates over time.
- x1, y1: First control point (departure from start)
- x2, y2: Second control point (approach to end)
- X values (0-1): Time progression
- Y values: Animation progress (can exceed 0-1 for overshoot)
Popular Cubic Bezier Values
Ease In Out
cubic-bezier(0.42, 0, 0.58, 1)Smooth acceleration and deceleration
Bounce Effect
cubic-bezier(0.34, 1.56, 0.64, 1)Slight overshoot for playful feel
Quick Snap
cubic-bezier(0.22, 1, 0.36, 1)Fast start, gentle landing
Dramatic Entrance
cubic-bezier(0.7, 0, 0.84, 0)Strong deceleration
Using Your Custom Curve
/* In transitions */
.element {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* In animations */
.element {
animation: slideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}Try the Visual Editor
Our CSS Animation Generator includes a drag-and-drop cubic bezier editor. Create custom curves and instantly convert them to keyframes.
Open Visual Bezier EditorAdvertisement