CSS 缓动函数生成器

选择 linear、ease、ease-in、ease-out、ease-in-out 等预设，或自定义 cubic-bezier(x1, y1, x2, y2) 的四个控制点参数（x1、x2 需在 0–1 之间，y1、y2 可超出），也可使用 steps(n, start|end) 阶梯缓动。工具会实时绘制贝塞尔曲线预览，并输出可直接使用的 transition-timing-function 与 animation-timing-function 代码，全部在浏览器本地完成。

缓动选项等待设置

预设

x1、x2 必须位于 0–1 之间；y1、y2 可超出 0–1（用于回弹等效果）。修改任一输入即自动切换为「自定义」。

改用 steps(n, start|end) 阶梯缓动

阶梯数 n

修改选项后需点击「生成缓动」；曲线预览按标准三次贝塞尔 P0=(0,0)、P3=(1,1) 采样绘制。

生成结果

类型—

控制点—

是否合法—

设置预设或控制点后点击「生成缓动」，CSS 代码将显示在这里。

生成的 timing-function 值可直接用于 transition-timing-function 或 animation-timing-function。

生成规则

关键字预设的等价贝塞尔（依 CSS 规范）：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)；linear 为匀速。
三次贝塞尔：B(t) = 3(1-t)²t·P1 + 3(1-t)t²·P2 + t³·P3，其中 P0=(0,0)、P3=(1,1)。
曲线预览按 t∈[0,1] 采样，直接绘制参数点 (x(t), y(t))。
steps(n, end) 在区间末端跳跃，steps(n, start) 在区间起点跳跃，n 为正整数。