cubic-bezier() 的 x1、x2 必须在 [0,1] 内，否则整个函数被浏览器静默丢弃并回退到 ease；y 值略超限虽不报错但行为不可控；transition 简写会继承前项 timing-function；@keyframes 内不可声明 animation-timing-function。
cubic-bezier() 的 x 值超出 [0,1] 会直接失效
浏览器对 cubic-bezier() 的 x 坐标（即 x1 和 x2）有硬性校验：只要任一 x 值小于 0 或大于 1，整个函数就会被静默丢弃，回退到默认的 ease。这不是警告，也不报错，你改了也看不出变化——这是最常踩的坑。
-
cubic-bezier(-0.1, 0.5, 0.8, 0.9)→ Chrome/Firefox/Safari 全部忽略，用ease -
cubic-bezier(0.2, 0.5, 1.05, 0.9)→ 同样失效，x2 = 1.05 超限 - 调试时打开 Chrome DevTools 的「Animations」面板，如果时间函数预览图显示为一条直线而非曲线，基本可断定 x 越界
y 值略超 [0,1] 不会失效，但行为不可控
y 值（y1、y2）理论上允许略超范围，用于模拟超调（overshoot）或回弹，但实际效果高度依赖浏览器实现：
- Safari 对负 y 值极其敏感：
cubic-bezier(0.2, -0.3, 0.8, 1.2)在 iOS 15+ 可能 fallback 到linear - y > 1 可能导致动画开头猛冲（如
y1 = 1.5让起始斜率陡增），但不同设备渲染不一致 - 没有“安全超限值”——
y1 = 1.275在某台 Mac 上看着自然，在另一台 Android 机上可能卡顿
transition 中简写覆盖 timing-function 容易误判
在 transition 简写中混用多个属性和 timing function，会导致后项继承前项的缓动，而不是各自独立生效：
-
transition: width 0.3s cubic-bezier(0.1, 0.8, 0.9, 0.2), height 0.3s;→height实际用的是前面那个cubic-bezier()，不是ease - 想让不同属性用不同曲线，必须显式写出：
transition: width 0.3s cubic-bezier(...), height 0.3s ease-out; - 用开发者工具检查 computed 样式里的
transition-timing-function，确认它真显示你写的值，而不是被覆盖或降级
@keyframes 里不能把 cubic-bezier 写进 from/to 块
cubic-bezier() 必须挂在 animation 属性上，不能塞进关键帧内部：
- ❌ 错误写法：
to { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); } - ✅ 正确写法：
.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } - 需要分段控制节奏？只能靠多段关键帧 + 多个
animation-timing-function声明，例如 0%→60% 用一个曲线，60%→100% 换另一个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
