Cubic Bezier 编辑器

怎么用

1. 拖动粉色控制点移动第一个控制点，拖动琥珀色控制点移动第二个。
2. 画布上会画出单位方框、生成的曲线，以及从两个角连到控制点的辅助线。
3. 在数字输入框里微调 x1、y1、x2、y2。x1 与 x2 必须落在 0 到 1 内，否则 CSS 会判为无效。
4. 点 Play 让六条轨道同时跑起来。第一条是你的曲线，下面五条是 CSS 关键字缓动。
5. 复制生成的 CSS。若数值与某个关键字完全一致，代码片段里会注明。

常见用法

• 做过冲效果 —— 把 y1 推到 1 以上或把 y2 压到 0 以下，元素会略微越过目标再回弹。
• 还原设计稿里的动效 —— 把设计给的四个数字敲进去，先看清曲线再写代码。
• 与关键字对照 —— 六条轨道一起跑，一眼看出你的曲线和 ease-out 差多少。
• 排查「发闷」的过渡 —— 大半段都贴着对角线的曲线看起来会偏慢，画布上一眼可见。
• 沉淀动效变量 —— 在这里定下两三条曲线，再把同样的数值写进设计变量。

常见问题

问：为什么 x1、x2 锁在 0 到 1，而 y 不锁？ 答：CSS 规定 cubic-bezier 的 x 坐标必须在 0 到 1 之间，否则声明无效；y 坐标可以越界，过冲与回弹正是靠它做出来的。

问：预览和浏览器实际执行的一样吗？ 答：用的是同一套曲线定义：按 cubic-bezier 解 x 再读 y。浏览器内部算的是同一套数学，形状与节奏一致。

问：这些数值能用在 keyframes 里吗？ 答：可以。生成的代码片段同时给出 transition 与 animation 两种写法，四个数值在两处通用。