根本原因是未统一声明transition导致属性重绘不一致；应为真正触发样式的元素（如li或a）显式设置相同duration、timing-function的transition，仅包含color、background-color、transform、box-shadow等可GPU加速属性。
为什么 :hover 效果看起来“跳”或“不统一”
根本原因通常是部分列表项的样式变化触发了不同类型的 CSS 属性重绘，比如有的改 color，有的改 background-color，还有的加了 transform 或 box-shadow，但没统一设置 transition。浏览器对每种属性的默认过渡行为不同，且未显式声明时，transition 不生效。
如何为所有 li 项强制启用一致的 transition
最稳妥的做法是：在基础 li 选择器上统一声明 transition，并覆盖所有可能参与 hover 变化的属性。避免只写 transition: all .2s——它会过渡所有可动画属性（包括意外的 height、opacity 等），导致不可控。
- 明确列出需过渡的属性，例如：
color、background-color、transform、box-shadow - 使用相同持续时间、缓动函数和延迟（如无特殊需求，延迟设为
0s） - 确保父容器或伪类（如
a标签内嵌在li中）不覆盖该声明
li {
transition: color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
li:hover {
color: #fff;
background-color: #007bff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
常见陷阱：伪元素、锚点、继承样式干扰过渡
如果列表项里有 a 标签，而你只给 li 加了 transition，但 hover 样式实际写在 a:hover 上，那 li 的 transition 完全不生效。同理，用 ::before/::after 做装饰时，若对其做 opacity 或 scale 动画，也必须单独加 transition。
- 检查实际触发 hover 的元素层级，把
transition写在**真正应用样式变化的那个选择器上** - 避免在
li和其子a上都写不同transition，否则可能叠加或冲突 - 注意
inherit或unset会破坏显式声明，建议所有相关元素都显式定义
性能提示：慎用 width/height/left/top 触发 layout
如果 hover 时修改 width、height、margin 或定位属性（如 left），浏览器必须重新计算布局（layout），这比只改 transform 或 opacity 慢得多，且无法被 GPU 加速。即使加了 transition，也会卡顿。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: scale()替代width/height变化 - 用
transform: translateX()替代left，用opacity替代visibility切换 - 可通过浏览器 DevTools 的 “Rendering” 面板勾选 “Paint Flashing” 查看哪些区域在重绘
transition，而在它是否落在**样式真正变更的那个元素和属性上**。很多人调了半天发现没效果，最后发现只是把 transition 错写在了父容器上。 
