transition 属性必须写在悬停前的原始状态中，而非 :hover 里；仅部分属性支持过渡，如 color、transform 等，display、auto 高度等不支持；timing-function 不生效常因持续时间过短或变化幅度过小。
transition 属性写在悬停前还是悬停后
必须写在悬停前的原始状态里，也就是 :hover 规则之外。浏览器只在属性值变化时触发过渡，如果 transition 只写在 :hover 中，那初始状态没有过渡定义，变化就直接跳变。
- ✅ 正确：
.btn { transition: background-color 0.3s ease; } .btn:hover { background-color: #007bff; } - ❌ 错误：
.btn { background-color: #0056b3; } .btn:hover { background-color: #007bff; transition: background-color 0.3s ease; }
哪些 css 属性支持 transition
不是所有属性都能过渡。像 display、height（从 auto 开始）、font-size（某些旧版 safari）、z-index 这类不可动画化或离散型属性，设了 transition 也无效。
- ✅ 支持过渡的常见属性：
color、background-color、opacity、transform、width/height（需有明确数值，不能是auto） - ⚠️ 替代方案：想“显示/隐藏+淡入”，用
opacity+visibility组合，而不是display；想“展开高度”，优先用transform: scaleY()或 js 控制max-height
transition-timing-function 不生效的常见原因
ease、linear、cubic-bezier() 看起来没区别？大概率是过渡时间太短，或者变化幅度太小，人眼难以分辨缓动差异。
- 调试建议：先把
transition-duration拉长到2s，确认过渡是否触发；再调回合理值 - 注意：如果用了
transition: all 0.3s ease;，但某个属性本身不支持过渡（如display），整个声明不会报错，但该属性仍无动画 - 更稳妥写法：
transition: background-color 0.3s ease, opacity 0.3s ease;—— 明确列出要过渡的属性
浏览器兼容性与硬件加速陷阱
老版本 Safari（transition 在某些伪类或 flex 容器内支持不稳定；另外，transform 和 opacity 是唯二能触发 GPU 加速的常用过渡属性，其余大多走 CPU 绘制，容易卡顿或掉帧。
立即学习“前端免费学习笔记（深入）”；
- 性能提示：避免对
top/left做transition，改用transform: translateX() - 检查是否被覆盖：用开发者工具看 computed 样式里
transition是否为none—— 很可能是更高优先级选择器重置了它，比如某个全局重置 CSS 写了* { transition: none !important; }
过渡失效往往不是单一原因，而是「写错位置 + 属性不支持 + 时间太短」三者叠加。最有效的排查顺序是：先看 computed 中 transition 是否生效，再确认变化的属性是否可动画，最后拉长时间验证效果。