根本原因在于过渡被无意义叠加执行，浏览器不取消进行中的transition；真正安全的合成属性只有transform和opacity；hover离开时需强制中断过渡并避免对非交互区域启用transition。
根本原因不是动画“太慢”或“太快”，而是过渡被无意义叠加执行，浏览器不取消进行中的 transition，新状态直接覆盖旧状态，导致时间线错乱、帧率崩塌。
哪些 transition 属性会激活前庭系统
某些 CSS 属性天然带有空间位移暗示，比如 left、top、margin-left、width、height，它们会触发布局重排，且在滚动或缩放场景下放大视觉扰动。这类属性在高刷屏或快速悬停时极易诱发眩晕。
- 真正安全的合成属性只有两个：
transform（尤其是translateX/Y/Z、scale、rotate）和opacity -
background-color渐变更推荐用半透明遮罩层显隐控制，而非直接过渡——颜色突变本身就会刺激视觉系统 - 绝对不要对
background-position设transition：视差滚动中它每帧都在变，加过渡等于主动制造延迟和粘滞感
hover 离开时还在动，就是在加重眩晕
默认 transition 是对称的：进入要 0.2s，离开也得走完 0.2s。用户移开鼠标后元素仍在缓慢缩回或淡出，不仅打断操作流，还会强化运动错觉。
- 必须把
transition写在基础选择器里（如.card），而不是.card:hover中 - hover 离开时 JS 强制中断过渡：
el.style.transition = 'none'; el.offsetHeight; el.style.transition = '';（触发重排后恢复） - 对交互密集区加
pointer-events: none临时屏蔽事件，防止鼠标进出堆积；动画结束后记得恢复
为什么禁用非必要区域的 transition 很关键
页脚、版权栏、静态文本容器这些区域本不该有交互，但一旦写了 transition: all 0.3s，哪怕只是 hover 到旁边空白处，浏览器也会尝试启动过渡——这种“幽灵触发”会悄悄积累视觉噪声。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法是显式写
transition: none，比依赖未声明更可靠 - 用 DevTools 的 Layers 面板确认是否生成了合成层；没绿框说明没走 GPU，更容易卡顿+眩晕
- 检查是否有残留的
will-change: transform长期挂着——它会持续占用 GPU 内存，反而拖慢合成调度
真正难处理的不是“怎么加动画”，而是“什么时候不该加”。很多眩晕问题，根源在于过渡被当成装饰随手加上，却没考虑它是否参与了用户的实际交互路径。
