CSS Easing Functions & Cubic Bezier
A complete guide to CSS transition timing functions. Learn how to use ease-in, ease-out, ease-in-out, and create custom cubic-bezier curves for smooth, natural-looking animations.
What is a CSS Easing Function?
CSS easing functions control the rate of change of a CSS property over time. Instead of moving at a constant speed (linear), elements can accelerate and decelerate, creating more natural and appealing motion. The timing function determines the acceleration curve of the animation.
Why use easing?Real-world objects don't instantly reach full speed or stop instantly. They accelerate and decelerate. CSS easing functions mimic this natural physics, making your animations feel more polished and professional.
Standard CSS Timing Functions
ease0.25, 0.1, 0.25, 1Default easing. Slow start, fast middle, slow end.
ease-in0.42, 0, 1, 1Slow start, fast end. Good for elements leaving the screen.
ease-out0, 0, 0.58, 1Fast start, slow end. Good for elements entering the screen.
ease-in-out0.42, 0, 0.58, 1Slow start and end, fast middle. Balanced feel.
linear0, 0, 1, 1Constant speed. No acceleration or deceleration.
step-startsteps(1, start)Instant jump to final state.
step-endsteps(1, end)Hold initial state, then jump to final.
Popular Cubic Bezier Curves
Custom cubic-bezier functions give you precise control over acceleration. These are popular curves used by professional designers:
cubic-bezier(0.34, 1.56, 0.64, 1)Slight overshoot for playful, bouncy feel.
cubic-bezier(0.22, 1, 0.36, 1)Quick snap with smooth landing.
cubic-bezier(0.4, 0, 0.2, 1)Gentle acceleration and deceleration.
cubic-bezier(0.7, 0, 0.84, 0)Strong deceleration for dramatic effect.
What is Cubic Bezier?
A cubic bezier curve is a mathematical curve defined by four points: P0 (0,0), P1 (x1,y1), P2 (x2,y2), and P3 (1,1). The syntax iscubic-bezier(x1, y1, x2, y2).
- x1, x2: Control the time (horizontal axis) - must be between 0 and 1
- y1, y2: Control the output value (vertical axis) - can exceed 0-1 for overshoot
- Values greater than 1 create anticipation/overshoot effects
- Values less than 0 create bounce-back effects
CSS Transition Timing Function Examples
/* Using standard keywords */
.element {
transition: opacity 0.3s ease-in-out;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Multiple properties with different easing */
.element {
transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
Try the Visual Editor
Our CSS Animation Generator includes an interactive cubic-bezier editor. Drag the control points to create custom easing curves and see the results instantly.
Open Cubic Bezier Generator