transition没反应最常见的原因是未显式设置初始和悬停状态的可过渡属性值，如只写transition: all 0.3s却未定义color或background-color的起始样式；须在常态规则中声明transition，并避免用all，改用具体属性如color 0.3s。
transition 为什么加了没反应？
最常见原因是没给元素设置初始和悬停时的可过渡属性值，比如只写了
transition: all 0.3s</p> <p>但没定义 <code>color或
background-color 的起始状态，浏览器就不知道“从哪变到哪”。
- 必须显式声明起始样式（哪怕和默认值一样），例如
color: #333 -
transition要写在常态规则里，不是:hover里 - 避免用
all过渡——它会强行触发重排，影响性能；只写具体属性更稳妥，比如transition: color 0.3s, background-color 0.3s
:hover 中改 color 却闪一下才生效？
这是伪类样式被其他规则覆盖导致的优先级问题。比如父容器设了 color: #666，子元素没重置，:hover 就可能被压制。
- 检查开发者工具里
:hover样式是否被划掉（表示未生效） - 确保
:hover规则的 CSS 选择器权重 ≥ 常态规则 - 别依赖继承色值：直接在元素上写
color: #000，再在:hover里改
transition 在 Safari 里不工作？
Safari 对某些 CSS 属性的过渡支持较保守，尤其是 background 简写、或带渐变的 background-image，容易 fallback 成无动画。
立即学习“前端免费学习笔记（深入）”；
- 改用
background-color单独过渡，避开简写 - 避免在过渡中切换
display: none ↔ block——它不可动画，改用opacity+visibility - 旧版 Safari（-webkit-transition 前缀，但现代项目通常不用了，除非要兼容 iOS 13
按钮悬停变色卡顿，怎么优化？
颜色变化本身很轻量，但若同时触发布局计算（比如改了 padding 或 font-size），就会强制同步重排，造成卡顿。
- 只对合成属性做过渡：
color、background-color、transform、opacity - 避免过渡
width、height、top、left等触发布局的属性 - 如果必须位移，用
transform: translateX(2px)替代left: 2px
margin 改动就让整条链路变卡。 
