重播动画卡在中间状态的根本原因是浏览器复用动画实例。解决方法是先设 animation: none，再通过 offsetWidth 强制重排，最后恢复 animation 属性以创建新实例。
animation 重播时卡在中间状态？用 animation-play-state 不够
直接原因：CSS 动画默认复用当前动画时间线，animation-play-state: paused 或反复 toggle animation-name 都不会重置播放进度。哪怕你用 JS 移除再加回 class，只要元素没被销毁，浏览器就认为“这个动画还在那儿”。
- 触发重播前，必须打断当前动画实例 —— 最可靠方式是强制重绘：修改一个不影响视觉但会触发样式重计算的属性，比如
animation-duration设为0.001s再立刻改回 - 或者更干脆：用
void el.offsetWidth触发同步重排，再操作 class 或animation属性 - 别依赖
animation-fill-mode: none，它只控制前后端状态，不重置播放位置
JS 控制动画重头开始的最小可行写法
核心不是“重启动画”，而是“让浏览器新建一个动画实例”。以下代码在大多数现代浏览器中稳定生效：
function restartAnimation(el, animationName) {
el.style.animation = 'none';
void el.offsetWidth; // 强制重排
el.style.animation = `${animationName} 0.3s ease-in-out`;
}
注意：animation 是简写属性，设为 none 会清空整个动画链；offsetWidth 是最轻量的重排触发器，比 getComputedStyle 更快；别用 el.style.animation = ''，它可能保留旧值。
用 @keyframes 配合 JS 的隐藏陷阱
如果 keyframes 里用了 transform，而元素本身已有 inline transform，动画重播时会叠加 —— 看似从头开始，实际起始位置被干扰。
立即学习“前端免费学习笔记（深入）”；
- 确保动画内只声明要过渡的属性，不要和 inline style 冲突；例如动画里写
transform: translateX(100px)，就别同时在元素上写style="transform: rotate(10deg)" - 用
animation-timing-function而非 JS 定时器模拟动画，否则无法保证帧率和重播一致性 - IE11 及更早版本不支持
animation重置技巧，需降级为transition+ class 切换
React/Vue 中动画重播失效的常见原因
框架的 diff 机制会让 DOM 元素复用，即使 key 没变、class 被 toggle，浏览器仍沿用旧动画实例。
- 在 React 中，给动画元素加个唯一
key（比如时间戳），强制卸载重建：<div key={Date.now()} className="animate-slide" /> - Vue 中避免仅靠
v-if切换，配合:key="triggerId"才能清掉动画上下文 - 别在
useEffect或mounted里直接调用restartAnimation，等 DOM 更新完成后再执行（用requestAnimationFrame包一层）
