CSS3 贝塞尔曲线工具

功能

• 坐标系里直接拖动两个控制点，曲线与数值同步更新
• 横轴是时间、纵轴是进度 —— 曲线陡的地方动画快
• 纵轴允许越界（±0.5 的拖拽余量），回弹效果就这么调
• 7 条常用预设，每条都写明用在哪（快进慢出、入场回弹、强烈快出……）
• 调出的曲线接近某个关键字（ease / linear / ease-out……）时会指出来
• 方块预览可播放，直接用手感判断，不用盯着坐标系想象
• 键盘可操作：手柄聚焦后方向键微调，Shift 加速、Alt 减速
• 复制走的是完整片段：transition 与 animation 两种用法都在里面

使用方法

1. 拖动两个手柄，或先载入一条预设
2. 点「播放」看方块怎么动 —— 手感比坐标系直观
3. 也可以直接在四个输入框里填数值
4. 复制下方 CSS，粘到自己的样式里

常见问题

四个数字分别是什么？

两个控制点的坐标：`cubic-bezier(x1, y1, x2, y2)`。曲线固定从 (0,0) 走到 (1,1)，这两个点是牵引它的把手 —— 这就是为什么界面上只能拖两个手柄，而不是四个。横轴的 0 到 1 是时间（从开始到结束），纵轴的 0 到 1 是进度（从起点到终点）。

y 为什么能超出 0–1？

因为规范对 y 没有限制，而越界正是回弹效果的来源：y 大于 1 表示「冲过了终点再退回来」，y 小于 0 表示「先往反方向缩一下再走」（像拉满的皮筋）。预设里的「入场回弹」与「强回弹」就是这么调的。相比之下 x 必须待在 0–1 之内 —— 越界会让整条 `transition` 声明失效（不是被忽略，是整条都不生效），所以工具会把拖拽的 x 夹住。

调好的曲线该配多长的时长？

时长与曲线要一起调，因为同样的曲线在 200ms 和 800ms 下的观感完全不同 —— 这也是预览区能改时长更理想的原因（本工具的预览固定 900ms，偏慢，是为了让曲线形状看得清楚一些）。经验值：普通的悬停反馈 150–250ms，元素位移 300–500ms，需要「有精神」的入场动画 400–700ms。曲线越夸张（过冲越大），时长越不该短，否则那一下会显得像抖动。

缓动曲线与动画性能有关系吗？

没有直接关系 —— 决定性能的是动的是哪个属性（`transform` 与 `opacity` 可以在合成层完成，`width`、`top`、`box-shadow` 会触发重排或重绘），而不是曲线。曲线只影响观感。有一个例外值得知道：`cubic-bezier` 这类三次多项式浏览器算起来很便宜，而 `steps()` 与带弹簧物理的 JS 动画在长列表里可能成为瓶颈。