直接修改 animation-name 不会重播动画，必须通过强制重排（如设置 animation: none + offsetWidth + 恢复）或 Web Animations API 的 cancel() 后重新 animate() 来实现真正重播。
animation-name 本身不能重置动画
直接修改 animation-name 的值（比如从 slide-in 改成 slide-in 再改回去）不会触发重播。浏览器认为动画名称没变，或变更未引起动画状态重置，因此动画继续走完当前周期，或保持暂停/结束态。
真正有效的重播方式：强制触发动画重流
核心思路是让浏览器「忘记」当前动画状态，从而从头开始。最可靠的做法是短暂移除动画，再同步加回：
element.style.animation = 'none'; void element.offsetWidth; // 强制重排，清空渲染队列 element.style.animation = 'slide-in 0.3s ease-out';
- 必须用
animation简写属性操作，单独改animation-name或animation-duration都不够 -
offsetWidth是最轻量的重排触发方式，比getComputedStyle更快且无副作用 - 如果用了
animation-fill-mode: forwards，重播前建议先清除最终态样式（如transform），否则可能视觉跳变
用 class 切换更可控，但要注意 timing
通过添加/移除 class 控制动画，适合可预测的交互场景：
.trigger { animation: slide-in 0.3s ease-out; }
.element.replaying { animation: none; }
JS 中：
立即学习“前端免费学习笔记（深入）”；
el.classList.add('replaying');
void el.offsetWidth;
el.classList.remove('replaying');
- 避免直接用
classList.toggle()，它不保证 DOM 更新时机 - 如果动画依赖 CSS 变量（
--duration），需确保变量在移除 class 后仍有效，否则重播可能失效 - 多个连续触发时，建议加节流（如 50ms 锁定期），防止重排堆积卡顿
Web Animations API 是更现代的替代方案
需要精细控制（如暂停、反向、重播到指定时间点）时，element.animate() 更可靠：
const anim = el.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 300,
easing: 'ease-out'
});
// 重播
anim.cancel();
el.animate([...anim.effect.getComputedKeyframes()], anim.effect.getTiming());
- 原生支持
anim.reverse()、anim.play()、anim.finish()，语义清晰 - 不受 CSS class 竞态影响，但需自行管理动画引用，避免内存泄漏
- IE 不支持，若需兼容，仍得回落到 class + 重排方案
animation-name 就够了」——浏览器根本不管那套。关键永远是让渲染引擎感知到「这是一个新动画」，而不是试图说服它重用旧状态。 
