Cubic Bezier 生成器

曲线编辑

1 2
输出值 可直接粘贴解析

拖动手柄；方向键微调 0.01，Shift+方向键 0.1，按住 Alt 拖动精确到 0.001。

对比预览

动画属性
时长1200ms
当前曲线 0.000
参考曲线 ease 0.000
时间分布 等时间采样的位置密度

参考曲线

 
cubic-bezier(0.25, 0.1, 0.25, 1)

预设

点击应用

代码

什么是 cubic-bezier()

CSS 的 cubic-bezier(x1, y1, x2, y2) 用一段三次贝塞尔曲线描述动画的时间进度：横轴是已经过去的时间，纵轴是动画完成的比例。曲线的起点固定在 (0, 0)、终点固定在 (1, 1)，你能调的只有中间两个控制点。曲线越陡的地方运动越快，越平的地方越慢。

四个数字怎么读

x1 / x2
两个控制点的时间坐标，必须在 0 到 1 之间。超出这个范围的值会让曲线在时间轴上不再单调，浏览器直接视为无效声明并回退到默认缓动。
y1 / y2
两个控制点的进度坐标，没有取值上下限。大于 1 表示冲过终点再退回来（过冲），小于 0 表示先往反方向走一点再出发（回落），这是做出「弹一下」质感的来源。
前两个数（x1, y1）
控制动画开头的手感：y1 相对 x1 越大，起步越猛。
后两个数（x2, y2）
控制动画结尾的手感：x2 越接近 1 且 y2 接近 1，收尾越缓、越有减速感。

常见问题

cubic-bezier 的 y 值可以超过 1 吗？

可以。y1 和 y2 没有取值范围限制，y 大于 1 或小于 0 都是合法的，浏览器会画出过冲或回落的曲线。但 x1 和 x2 必须落在 0 到 1 之间，否则整条声明无效。本工具的 y 输入范围是 -1 到 2，并会在预览轨道上标出实际峰值。

ease、ease-in、ease-out 分别对应什么数值？

linear 是 cubic-bezier(0, 0, 1, 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)。这五个关键字在本工具的预设里可以直接点选。

cubic-bezier 能做出弹簧那样反复回弹的效果吗？

不能。一段三次贝塞尔曲线最多只能过冲一次，无法表达多次衰减振荡。需要反复回弹时，应改用 CSS 的 linear() 缓动函数（用足够多的采样点近似弹簧曲线）、关键帧动画，或者由 JavaScript 驱动的物理弹簧模型。

为什么要和参考曲线做对比？

缓动曲线的差别很难只看单条曲线判断。把候选曲线和现有曲线（例如 ease-out 或设计体系的标准曲线）放在同一帧同时播放，才能看出起步、收尾和整体节奏的实际差异；下方的时间分布条会把等时间采样点的疏密画出来，密的地方就是慢的地方。