cubic-bezier()在transition中无反应最常见原因是x1或x2超出[0,1]范围，浏览器静默丢弃函数并回退到ease；y值越界则行为不一致，iOS Safari尤其敏感。
为什么cubic-bezier()在transition中完全没反应
最常见原因是x1或x2超出了[0, 1]范围，浏览器直接静默丢弃整个函数，回退到ease——不是报错，也不提示，动画看起来“正常”但完全不按你写的走。
比如写成cubic-bezier(-0.1, 0.3, 1.2, 0.8)，Chrome 和 Firefox 会立刻忽略它；Safari 更激进，连y1或y2为负数（如-0.2）都可能 fallback 到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被简写属性覆盖了
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 样式里
transition-timing-function的最终值，不是看 styles 面板里你写了什么，而是看它实际解析成了什么
@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越界=不可控——宁可多加一帧动画，也不要赌浏览器对负y的支持
