transition-timing-function 合法值包括 linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier() 和 steps()；非法写法如 easein、ease-in-、带引号或空格均被忽略。
transition-timing-function 的合法值有哪些
浏览器只认标准的 timing-function 值，写错一个字母或加了空格都会回退到默认的 ease。常见合法值包括：linear、ease、ease-in、ease-out、ease-in-out，以及 cubic-bezier(0.25, 0.46, 0.45, 0.94) 和 steps(4, end) 这类函数式写法。
注意：easeIn、easeOut（驼峰）、ease-in-（多了一个短横）、"ease-in"（加了引号）全都不合法，CSS 解析器会直接忽略整条 transition-timing-function 声明。
transition 属性简写时 timing-function 被覆盖
用 transition: all 0.3s ease-in; 看似没问题，但一旦后续有其他 transition 简写声明（比如组件库或重置样式里写了 transition: background-color 0.2s;），就会覆盖掉整个过渡定义，包括 timing-function —— 因为没显式写出，浏览器按初始值 ease 处理。
建议做法：
立即学习“前端免费学习笔记（深入）”；
- 避免用
all，明确写出要过渡的属性，例如transition: opacity 0.3s ease-in, transform 0.3s ease-in; - 若必须用简写，确保所有相关属性都在同一行声明，且不被后续同名规则覆盖
- 在开发者工具中检查 computed 样式里的
transition-timing-function，确认它真正在生效，而不是显示为ease
transition-delay 或 transition-duration 为 0 时 timing-function 无效
如果 transition-duration 是 0s 或 0ms（哪怕只在某条媒体查询里被设成 0），整个过渡会被跳过，timing-function 自然不参与计算。同样，transition-delay 设得极大（比如 9999s）也会让人误以为“没动”，其实是还没开始。
排查方法：
- 在 DevTools 的 Styles 面板里，逐个检查
transition-duration是否为非零值 - 注意继承或层叠来源：比如父元素设置了
transition: none，子元素即使写了timing-function也无效 - 动画类（如
.is-open）切换时，确保 class 存在且触发了属性变化，否则没有过渡起点和终点，timing-function 无从谈起
使用 will-change 后 timing-function 表现异常
给元素加了 will-change: transform 后，部分浏览器（尤其是旧版 Safari 和某些 Chromium 版本）会对过渡行为做优化，导致 cubic-bezier() 曲线被简化，甚至强制转为 linear。这不是 bug，而是渲染管线绕过了部分合成层的插值逻辑。
临时验证方式：
- 先移除
will-change，看timing-function是否恢复预期效果 - 若必须用
will-change，优先选transform或opacity，避免will-change: left这类触发布局的值 - 对关键动效，用
@keyframes+animation替代transition，能更稳定控制缓动
cubic-bezier 参数更管用。 
