CSS 立方贝塞尔生成器

Drag the control points to create custom CSS easing functions. Preview animation and copy the code.

Ad Space

CSS Code

Ad Space

What Is Cubic Bezier?

CSS cubic-bezier() defines a custom timing function for CSS transitions and animations. The four numbers control two control points of a Bézier curve, allowing fine-tuned easing from ease-in to bounce-like effects.

What do the values mean?

The values (x1, y1, x2, y2) define two control points. X values must be between 0 and 1 (time), while Y values can exceed that range for overshoot/bounce effects.

Related Tools