transition失效最常见的原因是属性名写错、声明位置错误（应写在常态选择器而非:hover中）、初始/终值不可插值；需确保目标属性可计算可插值，避免display等不支持属性，并用DevTools验证生效值。
transition 属性没写对，hover 就不会动
最常见的原因是 transition 声明里漏了要过渡的属性名，或者写了不支持过渡的属性。css 只对「可计算、可插值」的属性做过渡，比如 color、opacity、transform、width（需有明确初始/终值）可以，但 display、height（设为 auto 时）、font-size（单位混用如 em 和 px）往往失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transition: all 0.3s ease;快速验证是否是属性名问题（仅调试用，上线前应明确指定） - 确保 hover 前后两个状态中，目标属性都有明确、可比较的值（例如都用
px，或都用rem） - 避免在
:hover中设置display: none或visibility: hidden—— 这类切换不触发 transition
:hover 触发但过渡一闪而过或根本没开始
这通常是因为初始状态和 hover 状态之间没有「实际变化」，或者 transition 被更高优先级规则覆盖。浏览器只在检测到属性值真正改变时才启动过渡动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查是否误把
transition写在:hover选择器里（应写在常态选择器中），例如：.btn { transition: opacity 0.2s; }
.btn:hover { opacity: 0.7; }✅
.btn:hover { transition: opacity 0.2s; opacity: 0.7; }❌（transition 不生效）
- 用浏览器开发者工具的「Computed」面板，确认元素上最终生效的
transition值，看是否被重置或继承为none - 注意伪类顺序：如果同时写了
:focus或:active，且它们也设置了相同属性但没配transition，可能造成中断
transform + hover + transition 仍没动画？查 will-change 和硬件加速
当用 transform 做位移/缩放时，理论上性能最好，但若父容器有 overflow: hidden 且子元素 transform 超出边界，部分浏览器（尤其是旧版 safari）会跳过过渡。另外，will-change: transform 没配好也可能干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给过渡元素加
transform: translateZ(0)或will-change: transform（仅在必要时，避免滥用） - 确保父容器没有意外裁剪：检查
overflow、clip-path、mask是否限制了动画区域 - 避免在
:hover中同时改transform和width—— 混合布局与绘制属性会降级到软件渲染，增加卡顿风险
过渡失效最常卡在「属性名写错」「transition 放错位置」「初始/终值不可插值」这三点，调的时候先打开 DevTools 看 Computed 里的 transition 和目标属性实时值，比猜快得多。