任务路径 / 从输入到结果
如何设计 cubic-bezier 缓动曲线
- 01
放置第一个控制点
把“控制点 X1”设在 0 到 1 之间，把“控制点 Y1”设在 −1 到 2 之间。曲线图会实时重绘，并画出一条从起点到你手柄的参考线。
- 02
放置第二个控制点
设置“控制点 X2”（0–1）和“控制点 Y2”（−1 到 2）。把 Y 值拉过 1，正是让缓动产生回弹感的过冲来源。
- 03
设置时长
把“时长”选在 0.1 到 4 秒之间。运动轨道上的标记会按你这条精确的曲线循环演示——你看到的节奏，就是上线后的节奏。
- 04
或从已知曲线开始
默认曲线——0.25, 0.1, 0.25, 1——正是标准的 ease 关键字，是中性的起点。按“加载示例”得到一条带回弹的过冲曲线（0.34, 1.56, 0.64, 1），直观展示 Y 值超过 1 的效果。
- 05
复制定时 CSS
“复制 CSS”或“下载 .css”会保存 toolars-cubic-bezier.css。.motion 规则设置 transition-duration，并把曲线赋给 transition-timing-function 和 animation-timing-function；它不设置 animation-duration，关键帧动画需另行指定时长。
- 06
发布前先读图表
图表在固定的起点和终点之间绘制进度随时间的变化：平缓段慢，陡峭段快。曲线跌破起点或越过终点不是错误——那是预备动作和过冲，被如实地画了出来。