hover动画跳帧因浏览器重置动画状态，应始终启用动画并用animation-play-state控制启停，配合transition处理视觉属性，必要时JS接管时序与清理。
hover 时动画突然跳帧或中断？先检查 animation-play-state
直接用 :hover 改变 animation 的 name 或 duration 很容易触发浏览器重置动画状态，导致从头开始、跳回初始帧，甚至卡顿。根本原因不是冲突，而是 CSS 动画默认不具备“暂停续播”能力。
-
animation-play-state: paused可以冻结当前帧，但需手动控制播放/恢复，不能靠 hover 自动衔接 - 若在
:hover中写animation: slide-in 0.3s，而默认状态是animation: none，浏览器会丢弃上一帧状态，强制重启 - 更稳妥的做法是让动画始终存在，只通过
animation-play-state切换运行状态
用 animation-play-state + transition 混合控制 hover 行为
把“入场动画”和“悬停反馈”拆成两个逻辑层：一个常驻的空动画占位（维持状态），另一个用 transition 控制视觉属性变化（如颜色、缩放），避免触发动画重播。
- 给元素设一个极短、无感的循环动画（如
animation: idle 1ms infinite），防止浏览器回收动画上下文 - 真正需要响应 hover 的属性（
transform、opacity、background-color）改用transition，它天然支持反向过渡和帧连续 - 如果必须用 keyframes 实现复杂路径（比如路径描边、形变），就把 hover 触发的动画定义为独立的
@keyframes，并确保起始帧与当前状态一致（用getComputedStyle在 JS 中读取当前值再设为from）
JS 主动接管动画状态更可控
当 hover 和动画都需要精确时序、或要响应鼠标移入/移出的中间状态（比如移出一半又移回），纯 CSS 容易失控。这时用 JS 监听事件，手动控制 animation-play-state 或替换 class 更可靠。
- 监听
mouseenter后添加is-hovering类，CSS 中用.element.is-hovering { animation-play-state: running; } - 监听
mouseleave并加防抖，避免快速进出导致动画反复启停；可配合setTimeout延迟取消播放态 - 用
element.getAnimations()获取当前所有动画实例，调用.cancel()或.finish()清理残留，防止多个动画叠加打架
.element {
animation: fade-idle 1000s infinite;
}
.element.is-hovering {
animation-play-state: running;
}
@keyframes fade-idle {
from { opacity: 1; }
to { opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
浏览器兼容性差异会放大冲突表现
Chrome 和 Safari 对 animation-play-state 的实现较一致，但 Firefox 在某些版本中对快速切换 paused/running 有延迟或丢帧。移动端 WebKit 还可能因 scroll-bounce 导致 hover 状态误判。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:hover在移动端生效——它只在桌面模拟或部分 iOS Safari 中有效，Android Chrome 基本不触发 - 若需跨端一致行为，统一用
class控制，并在 JS 中根据matchMedia('(hover: hover)')区分输入方式 - 动画中避免使用
height/width这类触发布局计算的属性，优先用transform和opacity，减少重排风险
