Cubic-bezier is a CSS easing function defined by two control points (P1, P2) that describe how animation speed changes over time. The x-axis represents time, y-axis represents animation progress.
cubic-bezier(x1, y1, x2, y2)
β’ x1, x2: Control point horizontal position (0~1)
β’ y1, y2: Control point vertical position (can exceed 0~1 for elastic effects)
Generate with the Bezier Curve Generator in three easy steps:
Yes! Values outside 0~1 create bounce, elastic, or overshoot effects for dynamic animations.
Copy the cubic-bezier() value and use it in your animation or transition: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);