CSS 三次贝塞尔曲线生成器

缓动函数决定动画如何加速和减速。在 CSS（以及 Web Animations API 和许多游戏引擎）中，它写作 cubic-bezier(x1, y1, x2, y2)：一条从 (0, 0) 到 (1, 1) 的曲线，由两个控制柄塑造运动方式。这个生成器提供 CSS 关键字、easings.net 上流行的曲线（easeOutCubic、easeInOutQuart、easeOutBack……）或您自己的控制柄，绘制曲线，用它让小球运动，并列出持续时间每 10% 处的进度。

使用方法

1. 选择一个预设，或选择“自定义”并输入 x1、y1、x2、y2。
2. 设置持续时间和要做动画的属性。
3. 观察预览中的小球，并查看进度表。
4. 复制 transition、animation 或 JavaScript 代码。

计算公式

x(u) = 3(1−u)²u·x1 + 3(1−u)u²·x2 + u³ · y(u) = 3(1−u)²u·y1 + 3(1−u)u²·y2 + u³

对于时间比例 t，生成器求解 x(u) = t 得到曲线参数 u（牛顿–拉弗森法，必要时退回二分法），再把 y(u) 作为进度。x1 和 x2 必须在 0 到 1 之间；y 值超出 0–1 就会产生过冲。

示例

关键字 ease 就是 cubic-bezier(0.25, 0.1, 0.25, 1)：持续时间过半时，元素已经走完了 80.24% 的距离，所以 ease 给人先快后缓的感觉。ease-in（0.42, 0, 1, 1）此时只完成了 31.54%。easeOutBack 会过冲：在时间过半时已到 108.74%，随后再回落。