cubic-bezier() 仅控制时间到进度的映射，x1/x2必须在[0,1]内，否则静默回退为ease；y1/y2可越界实现弹性效果，但|y|≤1.8更安全；多属性不同贝塞尔函数不能生成曲线路径。
直接说结论：cubic-bezier() 能定制缓动曲线，但只控制「时间 → 进度」映射，不是空间路径；四个参数必须是数值，y1 和 y2 可以超出 [0,1] 范围，x1 和 x2 必须在 0–1 之间，否则会被浏览器忽略或重置为默认值。
为什么 cubic-bezier(0.5, 2, 0.5, -1) 有时没反应？
常见错误是把控制点横坐标写成负数或大于 1，比如 cubic-bezier(-0.1, 0.3, 1.2, 0.7)。浏览器会静默丢弃非法 x 值（x1 和 x2），并用 ease 替代整个函数——你根本看不到报错，动画就“变回默认了”。
-
x1和x2必须满足0 ≤ x1 ≤ 1且0 ≤ x2 ≤ 1，这是 CSS 规范强制要求 -
y1和y2没有硬性范围限制，y = 2表示动画进度可“超调”，y = -0.5表示反向回弹 - Chrome / Firefox / Safari 对非法
x的处理一致：跳过该 timing function，回退到ease
如何用 y 值越界实现弹性/回弹效果？
真正让缓动“活起来”的，是故意让 y1 或 y2 超出 [0,1]。这不是 bug，是规范允许的特性——它让动画能模拟物理惯性。
-
cubic-bezier(0.2, 1.5, 0.8, -0.5)：先快进、再冲过头、最后弹回目标位置，适合按钮点击反馈 -
cubic-bezier(0.4, 1.2, 0.6, 1.2)：双高点，产生轻微“悬浮感”，常用于卡片悬停浮起 - 注意：越界
y值越大，动画越容易出现“抖动”或“卡顿”，尤其在低端设备上；建议|y| ≤ 1.8为安全边界
多个属性用不同 cubic-bezier 时要注意什么？
你不能靠给 left 和 top 分别设不同 cubic-bezier() 来“画曲线路径”——它们各自独立插值，结果只是斜线或折线，不是贝塞尔轨迹。
立即学习“前端免费学习笔记（深入）”；
- 例如：
transition: left 0.5s cubic-bezier(0.1, 0.9, 0.9, 0.1), top 0.5s cubic-bezier(0.9, 0.1, 0.1, 0.9)，元素走的是平行四边形对角线，不是弯曲路径 - 真要沿二维贝塞尔路径运动，必须用
offset-path+offset-distance，或用 JavaScript 手动计算每帧坐标 - 如果只是想让缩放和旋转节奏不同，可以放心组合：
transform: scale() rotate()是单个属性，整个transform用一个cubic-bezier()控制即可
最易被忽略的一点：cubic-bezier 的输入是归一化时间（0→1），输出是归一化进度（0→1），它不感知像素、角度或透明度单位——你看到的“快慢”，全是这个映射关系在起作用。调参时盯着进度曲线本身，比盯着最终动画更有效。
