cubic-bezier参数越界会导致静默降级而非报错，因chrome/firefox遇y1/y2∉[0,1]即丢弃整函数回退ease，safari更严苛可能降级linear；x1/x2超[0,1]亦失效，devtools动画面板显示直线即未生效。
为什么cubic-bezier参数越界会导致动画“没反应”
不是浏览器报错，而是静默降级：只要y1或y2超出[0, 1]（比如-0.1或1.2），Chrome/Firefox会直接丢弃整个cubic-bezier()，回退到ease；Safari更狠，可能直接降级为linear。你看到的“开头突兀”“结尾卡顿”“完全看不出弹性”，大概率是这个原因。
用 Chrome DevTools 的「Animations」面板点开时间函数预览图，如果显示为直线而非曲线，说明cubic-bezier()根本没生效。
-
x1和x2必须严格在[0, 1]内，超一点（如1.01）就不可靠 -
y1/y2略超（如-0.05）在部分浏览器可能侥幸生效，但跨浏览器行为不一致 - 别信“负y值=更强弹性”，它只是让曲线在
y 或<code>y > 1区域延伸——而CSS动画的输出值被强制截断在[0, 1]，实际效果常是线性或失真
transition里cubic-bezier()必须写在简写属性末尾
transition是简写属性，顺序和结构决定是否生效。单独声明transition-timing-function会被transition简写覆盖。
❌ 错误写法（后一句无效）：transition: transform 0.3s;transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
✅ 正确写法（timing-function紧接duration之后）：transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
- 多属性不同缓动时，用逗号分隔，每段都得带自己的timing-function：
transition: width 0.3s ease-in, height 0.3s cubic-bezier(0.4, 0.2, 0.6, 0.8); - 后一项没写timing-function，会继承前一项——容易误判哪段生效了
哪些cubic-bezier值适合常见交互场景
不要凭感觉调参。先按目标效果选方向，再微调：
- 按钮悬停缩放（轻微Q弹）：
cubic-bezier(0.175, 0.885, 0.32, 1.275)—— y2 > 1 制造过冲，但x1/x2都在[0,1]内，兼容性好 - 开关滑块（快启慢停）：
cubic-bezier(0.68, -0.55, 0.27, 1.55)—— y1负、y2超1，视觉弹性强，需测试Safari - 菜单展开（自然柔和）：
cubic-bezier(0.42, 0, 0.58, 1)—— 接近ease但更平滑，y值守界最稳 - 避免用
cubic-bezier(0.2, -0.3, 0.8, 1.2)这类组合：Safari大概率降级为linear，动画变机械
@keyframes里不能把cubic-bezier塞进from/to块
cubic-bezier()在@keyframes中不能像transition那样写在属性值里。它必须作为animation-timing-function单独声明，或写在animation简写中。
✅ 正确：@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }.box { animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
❌ 错误（语法无效）：@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0) cubic-bezier(0.34, 1.56, 0.64, 1); } }
关键区别：transition作用于状态切换，cubic-bezier()是其内置timing-function；@keyframes定义的是关键帧路径，timing-function控制整段动画节奏，不在单帧内生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
