cubic-bezier()能用，但x1/x2必须严格在[0,1]内，否则浏览器静默降级为ease；y1/y2可略超[0,1]实现过冲，但超出[-0.5,1.5]易跳变，safari兼容性更差，devtools预览呈直线即失效。
直接说结论：cubic-bezier() 能用，但参数稍有越界就会静默失效——尤其 y1 或 y2 超出 [0, 1]，Chrome 和 Firefox 会直接降级为 ease，不是报错，是“看起来没变”，最易踩坑。
为什么cubic-bezier(0.68, -0.6, 0.32, 1.6)在部分代码里能动，但你一抄就失效？
因为浏览器兼容策略不一致：Safari（iOS 15.4 之前）和旧版 Chrome 严格校验四值是否全在 [0, 1] 内；而新版 Chrome 允许 y 值越界实现超调（如弹跳），但前提是 x1、x2 仍在合法范围（0–1）。一旦 x1 = -0.1 或 x2 = 1.5，整条曲线被丢弃，动画退化为线性或 ease。
-
y1或y2为负数 → 可能触发反向运动（如先上移再下落），但在 Safari 上常静默 fallback 到linear -
y2 > 1.3→ 在 Chrome 中易过冲，但 DevTools 动画检查器里若显示为直线，说明已失效 - 真机测试比桌面端更关键：iOS 16+ 支持
y越界，但 iOS 15.3 及以下仍可能截断为1
transition 和 @keyframes 里写 cubic-bezier 的位置区别
语法一样，生效逻辑完全不同：在 transition 中，它控制整个属性变化的全局节奏；在 @keyframes 中，它必须写在 animation 属性值末尾，不能塞进 from/to 块内部。
- ✅ 正确：
.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } - ❌ 无效：
@keyframes slide { to { transform: translateX(100px); animation-timing-function: cubic-bezier(...); } } - ⚠️ 注意：
animation-timing-function是动画层属性，不是关键帧内样式；想分段变速，得拆成多个@keyframes+ 多个animation层叠，或用 JavaScript 控制
怎么调试 cubic-bezier 值是否真正生效？
别靠肉眼猜，用 Chrome DevTools 实时验证：Elements 面板 → 找到元素 → Styles 侧边栏 → 点开 animation-timing-function 或 transition-timing-function 右侧的小齿轮图标 → 选 “Cubic Bezier” → 观察预览图。
- 如果预览图是一条斜直线（非曲线），说明浏览器没识别该函数，大概率是参数越界或语法错误
- 拖动控制点时，注意右上角实时显示的数值：确保
x1、x2始终在0–1，y1、y2若需越界，优先只动y2（落地反弹更稳定） - 复制生成值后，立刻在 CSS 里粘贴并刷新，避免手输小数点位数错误（比如把
0.675错打成0.67）
复杂点在于：贝塞尔曲线控制的是「速度变化率」，不是位移本身。哪怕参数全对，如果动画元素用了 top/left 而非 transform，或者父容器 overflow: hidden 没配好，回弹效果照样被裁掉——曲线再准，也得跑在正确的渲染路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
