为什么CSS transition-timing-function不起作用？检查cubic-bezier参数格式
cubic-bezier()在transition中无反应最常见原因是x1或x2超出[0,1]范围，浏览器静默丢弃函数并回退到ease；y值越界则行为不一致，iOS Safari尤其敏感。
为什么cubic-bezier()在transition中完全没反应
这恐怕是最常见也最隐蔽的“坑”了：当cubic-bezier()函数的x1或x2参数超出了[0, 1]这个硬性范围，浏览器会直接、静默地丢弃你写的整个函数，然后悄无声息地回退到默认的ease曲线。整个过程没有报错，控制台也不会有任何提示，结果就是动画看起来“正常”播放，但节奏感跟你预想的完全对不上。
举个例子，如果你写成了cubic-bezier(-0.1, 0.3, 1.2, 0.8)，Chrome和Firefox会立刻忽略它；而Safari，尤其是iOS上的版本，处理起来更“激进”，有时连y1或y2为负数（比如-0.2）都可能触发降级，直接回退到linear线性动画。
- 诊断技巧：打开Chrome DevTools的「Animations」面板，点开时间函数的预览图。如果显示的是一条笔直的斜线，而不是一条有曲率的贝塞尔曲线，那就说明你写的
cubic-bezier()根本没生效。 - 参数规则：
x1和x2必须严格限定在[0, 1]区间内；y1和y2理论上可以略微超出（比如1.2或-0.15），但iOS Safari对负y值的支持极不稳定，务必慎用。 - 最佳实践：别手动输入参数——直接使用cubic-bezier.com这类可视化工具拖拽生成，它能自动锁定输入框范围，从源头上杜绝参数越界。
transition-timing-function被简写属性覆盖了
这是CSS属性优先级的一个经典陷阱。transition这个简写属性有一个特性：它会重置所有相关的子属性，其中就包括transition-timing-function。如果你先写了transition: all 300ms;，然后又想单独设置transition-timing-function: cubic-bezier(...);，后者很可能会被前者的简写声明覆盖掉。
- 解决方案一（全用简写）：
transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);把所有属性一次性写清楚。 - 解决方案二（全部分开写）：
transition-property: transform;、transition-duration: 300ms;、transition-timing-function: cubic-bezier(...);避免简写和分写混用。 - 检查方法：别只看样式面板里你写了什么，关键要看最终计算后的样式（Computed Styles）里，
transition-timing-function的实际解析值是什么。
@keyframes里误写cubic-bezier()到from/to块内
这里有个语法上的小“误会”。cubic-bezier()作为时间函数，不能直接写在@keyframes规则的from或to块内部。虽然这么写语法上可能不会报错，但浏览器会直接忽略它，导致动画节奏失效。
立即学习“前端免费学习笔记（深入）”；
来看一个典型的错误写法：
@keyframes slide {
from { opacity: 0; }
to {
opacity: 1;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); // 写在这里是无效的！
}
}
- 正确做法：把
cubic-bezier()写在使用该动画的元素选择器上，例如：.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } - 进阶提示：如果真想实现动画过程中分段控制节奏，需要借助多个关键帧，并在关键帧层级上声明
animation-timing-function（例如60% { ...; animation-timing-function: ...; }）。但请注意，这个技巧仅在animation中有效，transition并不支持分段的时间函数控制。
浏览器兼容性导致y值行为不一致
即便参数格式都正确，当y1和y2的值超出[0, 1]范围时，不同浏览器的处理方式也可能大相径庭。比如，Chrome可能允许y2 = 1.3来实现轻微的“超调”弹性效果，而Firefox可能会将值截断为1。至于iOS Safari，在15版本之前，遇到y1 = -0.1这样的负值，可能就直接将动画降级为linear了。
- 稳妥方案：想要实现弹性或弹跳这类复杂效果，优先考虑使用
animation配合多个关键帧来模拟，而不是依赖越界的y值去“碰运气”。 - 测试准则：如果确实需要使用越界的
y值，务必在真机（尤其是iOS设备）上进行充分测试，绝不能只依赖桌面版Chrome的模拟结果。 - 核心原则：可以记住一个简单的口诀——
x值越界等于直接失效，y值越界等于行为不可控。宁可多花点功夫，用增加关键帧的方式来精确控制动画，也不要赌浏览器对特殊参数的支持度。
