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)
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);