为什么css transition-timing-function不起作用_检查cubic-bezier参数格式

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的支持