cubic-bezier()是CSS中通过四个参数定义缓动函数的标准方法，x1/x2∈[0,1]决定时间轴形态，y1/y2可越界实现过冲或回弹；x超界则整个函数失效，y过大易致跳动，需结合属性与设备实测调试。
什么是 cubic-bezier()，它为什么能控制过渡节奏
cubic-bezier() 是 CSS 中定义缓动函数的标准方式，它用四个参数 cubic-bezier(x1, y1, x2, y2) 描述一条贝塞尔曲线，其中两个控制点决定了动画在时间轴上的加速/减速形态。横轴（x）代表时间进度（0→1），纵轴（y）代表属性变化比例（0→1）。浏览器据此插值计算每一帧的中间状态。
关键点在于：x1 和 x2 必须在 [0, 1] 范围内，否则声明无效（整个 transition-timing-function 会退化为 ease）；而 y1、y2 可以超出该范围，从而实现“回弹”或“过冲”效果（比如 cubic-bezier(0.17, 0.67, 0.83, 1.5) 就是常见缓出+轻微过冲）。
怎么写一个真正可用的自定义贝塞尔曲线
手算控制点不现实，但也不能全靠在线生成器——得知道哪些值是安全的、哪些会失效、哪些会产生意外行为。
- 避免
x1 或 <code>x1 > 1：哪怕只错 0.001，整条曲线会被忽略 - 慎用
y1或y2 > 1.5：可能导致动画在结束前反向跳动（尤其在低帧率设备上） - 想模拟弹簧效果？用
cubic-bezier(0.28, 0.01, 0.14, 1.09)比网上乱传的 “spring” 值更稳定 - 要线性过渡？别写
cubic-bezier(0,0,1,1)，直接用linear—— 语义清晰且兼容性更好
常见错误：为什么你的 cubic-bezier() 没生效
最常被忽略的是声明位置和层级覆盖问题，而不是曲线本身写错了。
立即学习“前端免费学习笔记（深入）”；
- 在
@keyframes里写了cubic-bezier()，但外部transition没配animation-timing-function？没用 - 多个
transition声明并存（比如同时写了transition: all 0.3s;和transition: opacity 0.3s cubic-bezier(...);），后者会被前者覆盖 - 用了缩写
transition却漏写了时长：例如transition: transform cubic-bezier(...);→ 缺少时间值，贝塞尔直接被丢弃 - 在 Safari 15.4 之前，
cubic-bezier()不支持负y值用于transform过渡（如y1 = -0.2），会静默降级
调试技巧：快速验证贝塞尔是否按预期工作
别靠肉眼猜，用浏览器 DevTools 实时拖动控制点看效果：
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.66, 0.02);
打开 Chrome / Edge 的 Styles 面板，点击 timing function 右侧的小图标（⏱️），就能进入可视化编辑器。注意观察两点：
- 曲线是否连续、无折角（不连续会导致瞬时速度突变，看起来“卡顿”）
- 起始斜率（左端切线）是否接近 0？不是的话，
transform动画可能“弹出”而非平滑启动 - 右端斜率是否为 0？否则结束时容易有“甩尾”感
真正难调的不是数值本身，而是不同属性对同一曲线的感知差异：同样的 cubic-bezier() 用在 opacity 上很柔和，用在 left 上可能就显得生硬——得结合具体属性反复试。
