:hover过渡高频闪烁的根源是鼠标在元素边缘反复进出导致动画中断重置，而非缓动函数或时间错误；解决关键是用pointer-events: none切断装饰性元素的事件干扰，并仅对transform、opacity等合成属性做过渡。
为什么:hover transition会高频闪烁
根本不是缓动函数或时间写错了，而是鼠标在元素边缘反复进出，导致浏览器不断中断当前动画、重置状态再启动新过渡。尤其在嵌套容器、伪元素覆盖、RTL布局或指示器类元素上，这种“hover抖动”特别明显——比如导航栏下划线 #indicator 移动后刚好挡住鼠标，触发自身 :hover 失效，又弹回原位，形成死循环。
用pointer-events: none切断事件干扰链
这是最直接有效的解法，适用于所有被动画影响但无需交互的装饰性元素（如指示器、箭头、背景遮罩）：
-
#indicator必须加pointer-events: none，它仍能被a:hover ~ #indicator选择器驱动，但不再抢夺鼠标事件 - 不要用
opacity: 0或visibility: hidden替代——这会让视觉反馈断开 - 避免给该元素设
z-index，除非真有层叠冲突；多数情况下保持默认层叠顺序更稳
transition只动合成属性，别碰layout
闪烁常伴随大面积重绘（DevTools里看到大片红色高亮），说明你在动会触发重排的属性：
- ✅ 改用
transform: scale(1.05)替代width: 110% - ✅ 用
transform: translateY(-3px)替代margin-top: -3px - ✅
opacity可以动，但background-color要确保初始值明确（比如background-color: transparent） - ❌ 别对
display、height、left、font-size做 transition —— 它们无法走 GPU 合成层
防抖式transition配置
即使布局没问题，快速进出仍会导致动画队列堆积、中间帧残留：
立即学习“前端免费学习笔记（深入）”；
-
transition必须写在常态规则里（非:hover中），否则移出时无动画 - 进出时长可不对称：常态用
transition: transform 0.15s ease-out，:hover里写transition: transform 0.2s ease-in，让进入稍慢、退出更快 - 禁用
transition: all——哪怕只多了一个未声明的border-color变化，也会被强行插值，引发不可控抖动 - 复杂卡片或菜单，建议在 JS 控制 class 切换前加
requestAnimationFrame对齐帧率，比 setTimeout 更准
