深入理解 Cubic Bezier：CSS 动画的灵魂
在 CSS 动画和过渡中，
transition-timing-function
决定了属性值随时间变化的速率。
Cubic Bezier（三次贝塞尔曲线）
是定义这种速率的最强大工具。它由四个参数
(x1, y1, x2, y2)
组成，代表了两个控制点的坐标。
1. 贝塞尔曲线的数学逻辑
一条贝塞尔曲线定义在
0.0
到
1.0
的坐标系内：
- X 轴： 代表时间进度。必须在 0 到 1 之间。
- Y 轴： 代表动画完成度。通常在 0 到 1 之间，但也可以超出这个范围（产生回弹或冲出效果）。
- 控制点 P1 (x1, y1) 和 P2 (x2, y2)： 它们就像磁铁一样吸引曲线，决定了速度的快慢变化。
2. 解决的具体问题：告别僵硬的机械感
场景一：自然的物理运动。
默认的
linear
动画非常僵硬，因为现实世界中没有物体是瞬间加速并保持恒速运动的。使用
ease-in-out
或自定义的贝塞尔曲线可以模拟物体的惯性，让 UI 交互更符合直觉。
场景二：回弹动画（Bounce/Back）。 通过将 Y 轴的值设置为大于 1 或小于 0，你可以实现“先退后进”或“冲出再返回”的效果。这在按钮点击、弹窗弹出等交互中非常受欢迎。
场景三：品牌个性。 不同的品牌有不同的动效性格。有些品牌追求极速响应（陡峭的曲线），有些则追求优雅从容（平缓的曲线）。通过本工具，你可以精准微调出最符合品牌调性的动效。
3. 调试技巧
在调试时，利用本工具的
对比预览
功能非常重要。将你的自定义曲线与标准的
ease
和
linear
进行同步对比，能帮你更清晰地感知动画在起步、中段和收尾阶段的速度差异。