CSS Cubic Bezier Generator
Design custom easing functions for CSS transitions and animations.
Cubic Bezier
Design custom CSS easing animations.
Control Points
Point 1
Point 2
Animation Race
Duration1000ms
Linear
Custom
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);What is a Cubic Bezier?
In CSS, a cubic-bezier function defines a cubic Bézier curve used for easing transitions and animations. Easing functions specify the speed of an animation over time, making movements feel more natural, snappy, or bouncy rather than mechanical and linear.
How it Works
A cubic Bézier curve is defined by four points: P0, P1, P2, and P3.
- P0 is always fixed at (0, 0), representing the start of the animation (time = 0, progress = 0).
- P3 is always fixed at (1, 1), representing the end of the animation (time = 100%, progress = 100%).
- P1 and P2 are the control points you define with this generator. The X coordinates represent time (must be between 0 and 1), and the Y coordinates represent progression.
Bouncing and Spring Effects
While the X coordinates must stay between 0 and 1 (time cannot go backward), the Y coordinates can exceed this range. Setting a Y coordinate above 1 or below 0 will cause the animation to overshoot its target and bounce back, creating a spring-like effect!
Related Guides
Deepen your understanding with our expert articles.