曲线编辑器

P1 (x1)0.25

P1 (y1)0.10

P2 (x2)0.25

P2 (y2)1.00

ease (默认) ease-in ease-out ease-in-out ease-in-out-elastic ease-in-out-bounce ease-in-back ease-out-overshoot

cubic-bezier(0.25, 0.10, 0.25, 1.00)

0%50%100%

💡 什么是贝塞尔曲线？

三次贝塞尔曲线（cubic-bezier）是CSS中定义的缓动函数，通过两个控制点（P1, P2）来描述动画速度的变化曲线。x轴表示时间，y轴表示动画进度。

cubic-bezier(x1, y1, x2, y2)

• x1, x2：控制点的水平位置（0~1之间）

• y1, y2：控制点的垂直位置（可超出0~1实现弹性效果）

• ease = cubic-bezier(0.25, 0.1, 0.25, 1)

• ease-in = cubic-bezier(0.42, 0, 1, 1)

• ease-out = cubic-bezier(0, 0, 0.58, 1)

• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

可以。当y值超出0~1范围时，动画会产生弹性（bounce）或回退（back）效果，配合适当的x值可以实现生动的动画效果。

复制生成的 cubic-bezier() 值，在CSS中的 animation 或 transition 属性中使用即可。例如：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

CSS规范要求cubic-bezier的x值在0~1范围内，以确保时间曲线不会出现"回溯"现象，保证动画在指定时间内完成。