CSS 三次贝塞尔生成器
调整动画的加速与收尾方式，再复制适用于过渡或关键帧的标准 CSS cubic-bezier() 时间函数。
时间曲线
横轴：经过的时间。纵轴：动画进度。
实时对比
线性
自定义
使用步骤
如何使用
- 选择常用缓动预设，或直接输入 x1、y1、x2、y2。
- 查看时间曲线，并将自定义运动与线性动画对比。
- 复制 cubic-bezier() 值，用作 CSS 过渡或动画时间函数。
时间曲线，而非路径曲线
CSS 三次贝塞尔值描述动画进度随经过时间的变化。横轴是时间，纵轴是进度，因此本工具不绘制物体行进的几何路径。实时对比让同一示例分别使用线性时间与自定义时间函数运动。
为何限制 x 值
CSS 要求 x1、x2 在 0 到 1 之间，使曲线中的时间坐标向前推进，每个动画时刻都能求得进度。本工具执行此范围。y1、y2 可为 -2 到 3，以支持低于起点的预备动作或超过终点的超调。
可直接复制的浏览器 CSS
复制值为最多两位小数的标准 cubic-bezier() 时间函数，可用于 transition-timing-function、animation-timing-function 或相应简写属性。图形与动画在浏览器内运行，不代表物理运动，也不保证所有界面中的感知速度相同。
常见问题
你可能还想知道
x1、y1、x2、y2 表示什么？
它们是三次贝塞尔时间曲线的两个控制点。曲线始终从 0,0 到 1,1，用户选择中间的两个点。
y 能小于 0 或大于 1 吗？
可以。负 y 可在推进前短暂反向预备，超过 1 的 y 可越过最终值。本工具允许 -2 到 3。
为何 x 不能超出 0 到 1？
CSS cubic-bezier 时间函数要求两个 x 控制值均在该区间内，否则时间可能向后折返，函数无效。
会生成 SVG 或运动路径吗？
不会。仅生成 CSS 时间函数。如需元素沿几何路线移动，请使用 CSS motion-path 或 SVG 路径工具。