transition必须写在非hover的基础样式中才能生效，因为它需同时控制进入和离开的过渡；支持过渡的属性有限，transform和opacity最安全高效。
transition 属性必须写在非 hover 的基础样式里
很多人把 transition 写在 :hover 伪类中，结果过渡不生效。这是因为浏览器只在状态切换时触发过渡，而 :hover 中的 transition 无法控制“离开”时的动画——它只定义了悬停进入的过渡，但离开时会立刻跳回原值。
-
transition必须放在元素的默认（非 hover）样式块中，才能同时控制进入和离开两个方向 - 支持过渡的属性有限，比如
color、background-color、transform、opacity、width（需有明确初始/结束值）等；display、height（无固定值时）、font-size（部分旧浏览器）等不推荐直接过渡 - 过渡时间单位统一用
ms或s，避免混用导致调试困难
hover 中只写需要变化的属性值
:hover 的作用只是声明“悬停时该变成什么样”，不是定义动画逻辑。过渡行为完全由基础样式里的 transition 控制。
button {
background-color: #007bff;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: #0056b3;
color: #f8f9fa;
}
上面这段代码中，transition 同时声明了两个属性，且都用了相同持续时间和缓动函数，这样能保持视觉一致性。如果只写 transition: all 0.3s，容易意外触发不需要过渡的属性（比如 box-shadow 的细微重绘），影响性能或产生闪烁。
transform 和 opacity 是最安全的过渡组合
比起改变 width 或 margin，用 transform: scale() 或 translateY() + opacity 实现悬停效果，性能更好，不会触发重排（reflow），尤其适合频繁交互的按钮或卡片。
立即学习“前端免费学习笔记（深入）”；
-
transform和opacity属于合成层属性，浏览器会将其交由 GPU 加速 - 避免对
top/left做过渡——它们会强制浏览器不断计算布局，造成卡顿 - 如果要实现“上浮+变暗”，优先写成：
transform: translateY(-2px); opacity: 0.95;，而不是margin-top: -2px; background-color: #333;
过渡失效的常见原因排查
当 hover 过渡没反应，先检查这几个点：
- 目标属性是否支持过渡？例如
display: none → block永远不会过渡，改用opacity+visibility - 初始值和 hover 值是否都是可计算的？比如
height: auto无法过渡到height: 100px，需改用max-height或transform - 有没有被更高级的选择器覆盖？用浏览器开发者工具检查 computed 样式，确认
transition确实生效且未被!important或其他规则屏蔽 - 是否在父容器上设置了
overflow: hidden且子元素transform超出范围？这可能导致动画被裁剪，看起来像没动
复杂交互里，过渡链容易断——比如 hover 改变 class 再触发动画，中间多了一层 JS 干预，就可能绕过原生 transition 机制。这时候不如直接用 @keyframes + animation 更可控。
