hover过渡抖动本质是重绘竞争，源于鼠标进出边界频繁触发:hover切换导致transition反复中断重启；应隔离非交互区、用ease-out缓动、必要时加will-change优化。
hover过渡抖动的本质是重绘竞争
不是CSS写错了，而是鼠标进出边界时触发了多次:hover状态切换，导致transition反复中断重启。浏览器来不及完成上一次过渡，就收到新起点，视觉上就是“卡顿”或“抽搐”。
- 常见于子元素多、布局嵌套深的菜单、卡片或带图标+文字的按钮
- 尤其在高DPI屏或滚动中悬停时更明显——鼠标微移就反复进出边界
-
transition默认没有“防抖”机制，每次状态变化都无条件执行
用pointer-events: none隔离非交互区域
很多抖动其实来自hover区域太“毛边”：比如文字换行、图标尺寸浮动、flex间隙微调，都会让鼠标实际经过路径和预期不一致。把非触发区设为pointer-events: none，能大幅减少误触发。
- 只对真正需要响应hover的容器（如
.card外层）设:hover，内部文字、图标等子元素加pointer-events: none - 避免给
span、i等内联元素单独设:hover，它们边界难控制 - 注意：若子元素需点击（如链接），改用
pointer-events: auto覆盖回局部
`.card { transition: transform 0.2s ease-out; }
.card:hover { transform: translateY(-2px); }
.card * { pointer-events: none; }
.card__action { pointer-events: auto; }`
transition-timing-function选ease-out而非ease
ease开头快、中间慢、结尾快，容易在鼠标刚移入时就猛动一下；而ease-out开头平缓，给浏览器留出判断时间，即使连续触发，视觉干扰也小得多。
- 别迷信“缓动越自然越好”，高频场景下，克制比拟真更重要
- 慎用
cubic-bezier(0.17, 0.67, 0.83, 0.67)这类复杂曲线——计算开销+不可预测的起始斜率会放大抖动 - 纯位移/缩放类动画，
ease-out+0.15s–0.25s区间最稳
必要时用will-change提前声明动画属性
不是所有hover都需要，但当抖动出现在较重元素（如含阴影、滤镜、多层伪元素的卡片）上时，will-change: transform能提示浏览器提前升格图层，避免每次hover都临时合成，减少重绘压力。
立即学习“前端免费学习笔记（深入）”；
- 只对明确有hover动画的元素加，不要全局写
will-change: transform - 动画结束立刻移除（可用
transitionend监听后设will-change: auto），否则长期占用GPU内存 - 在Safari上尤其有效——它对未声明
will-change的transform hover更敏感
过渡抖动问题不在“怎么加hover”，而在“谁该响应hover”和“响应得多干净”。边界模糊、子元素抢事件、timing函数贪全，这三处最容易被当成小细节忽略。
