动画重复触发异常主因是 animation-iteration-count 与 animation-fill-mode 配置不当，或与 JS 事件、:hover 等叠加导致重播；应显式设 iteration-count、慎用 fill-mode、避免监听器重复绑定，并优先使用 animate() API 精确控制。
动画重复触发异常，通常是因为 animation-iteration-count 和 animation-fill-mode 配置不当，或与 JS 事件、伪类（如 :hover）叠加导致多次重播。关键不是“禁用动画”，而是让动画行为可控、可预期。
检查 animation-iteration-count 是否被意外重置
如果动画本应只执行一次，但反复触发，先确认是否误设为 infinite 或未显式声明次数：
- 默认值是
1，但某些框架/内联样式可能覆盖它，建议显式写明：animation-iteration-count: 1; - 避免在 hover 或 click 类中仅定义部分动画属性（如只写
animation-name），这会重置整个动画状态，包括 iteration count - 若需 JS 控制播放次数，优先用
element.style.animationIterationCount = "1"，而非切换 class（易引发冲突）
合理使用 animation-fill-mode 防止“回跳”干扰下一次触发
fill-mode 决定动画开始前和结束后元素保留哪一帧的样式。设错会导致视觉“闪回”，让人误以为动画又跑了一次：
- 想让动画结束态保持：用
animation-fill-mode: forwards; - 若同时用了
forwards又在 JS 中修改了同一属性（如transform），浏览器可能强制重绘并重启动画 —— 此时应改用backwards或both，或改用 CSS 自定义属性 +transition替代 - 慎用
animation-fill-mode: both;配合:hover，容易造成进入/离开时各播一次
避免事件监听器反复绑定导致动画多次触发
常见于动态添加元素后未清理旧监听器，或 Vue/React 中未正确销毁：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加点击动画时，确保每次只绑定一个 listener；用
addEventListener前先removeEventListener（或用{ once: true }） - 在组件卸载（
beforeUnmount/useEffect cleanup）中移除定时器或动画 class 切换逻辑 - 用
getAnimations()检查当前元素是否有残留动画：element.getAnimations().forEach(anim => anim.cancel());
用 animate() API 替代 CSS class 切换更可控
当复杂交互需要精确控制播放、暂停、重播时，原生 Web Animations API 比 class 切换更可靠：
- 直接创建动画：
element.animate(keyframes, { duration: 300, iterations: 1, fill: 'forwards' }); - 可随时调用
anim.play()、anim.pause()、anim.cancel() - 监听结束：
anim.onfinish = () => console.log('done');，不依赖animationend事件可能被多次触发的问题
