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

作者：袖梨 2026-06-07

cubic-bezier()在transition中无反应最常见原因是x1或x2超出[0,1]范围，浏览器静默丢弃函数并回退到ease；y值越界则行为不一致，iOS Safari尤其敏感。

最常见原因是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简写会重置所有子属性，包括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 面板里你写了什么，而是看它实际解析成了什么

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不支持分段