常见原因是transform被后续CSS规则覆盖，导致浏览器无法追踪状态变化；需检查层叠优先级、显式声明transition-property、确保值类型匹配及单位一致，并用DevTools验证计算值。
transition 对 transform 不生效的常见原因
直接原因是 transform 的值被后续 CSS 规则覆盖，导致浏览器无法追踪起始/结束状态变化，transition 失效。这不是动画 bug，而是样式层叠逻辑问题。
检查 transform 是否被 !important 或后声明规则覆盖
CSS 层叠中，后出现的同优先级规则会覆盖前面的；带 !important 的声明更难被覆盖。一旦某个元素的 transform 被设为 none 或固定值（比如 transform: translateX(0)）且未被清除，过渡就无从谈起。
- 用浏览器开发者工具（Elements → Styles）查看目标元素上最终计算出的
transform值，确认 hover / active 等状态切换时该值是否真正在变 - 检查是否有全局重置样式（如 Normalize.css 或某些 UI 框架）把
transform设为none且未被显式覆盖 - 避免在多个选择器中反复写
transform，尤其不要在基础类里写transform: none，又在状态类里写transform: scale(1.2)—— 若基础类权重更高，状态类就无效
transition-property 必须显式包含 transform
很多人写 transition: all 0.3s 以为万事大吉，但部分浏览器（尤其是旧版 Safari 和某些 Android WebView）对 all 的支持不一致，transform 可能被忽略。稳妥做法是明确列出。
button {
transition-property: transform, background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
}
button:hover {
transform: scale(1.1);
background-color: #007bff;
}
-
transition: transform 0.3s比transition: all 0.3s更可靠 - 不要混用简写和拆分写法：若用了
transition: transform 0.3s，再单独加transition-duration: 0.2s会导致整个 transition 被重置（CSS 简写属性会覆盖所有子属性） - 确保触发 transition 的属性变更发生在同一渲染帧内 —— 比如不要先改 class，再用 JS 读
offsetHeight强制重排，再改 transform，这会打断过渡链
transform 值类型不匹配也会中断 transition
浏览器只能在相同函数类型间插值。比如从 translateX(10px) 到 scale(1.2) 不会过渡，因为起始/结束值类型不兼容；同样，matrix() 和 rotate() 之间也无法过渡。
立即学习“前端免费学习笔记（深入）”；
- 始终用同一种 transform 函数组合：推荐统一用
transform: translateX(...) translateY(...) scale(...) rotate(...)，避免混用matrix() - 初始状态不要留空或写
transform: none后又期望它“自动理解”要过渡到什么 —— 显式写出初始值更安全，例如：transform: translateX(0) scale(1) - 注意单位一致性：不要从
translateX(10)（缺单位）跳到translateX(10px)，部分浏览器会拒绝过渡
transform 和 transition 两行看状态切换时是否实时更新 —— 很多时候问题不在代码逻辑，而在你根本没意识到某条 CSS 规则已经悄悄把它锁死了。 
