直接重设animation值无效，因浏览器缓存动画“已完成”状态，将其视为同一实例而不重启；必须通过设none→offsetHeight强制重排→恢复animation三步法丢弃旧状态并注入新动画。
直接重设 animation 值无效，必须强制浏览器丢弃当前动画状态，再注入新动画。
为什么直接改 animation 不会重播
CSS 动画播放结束后，浏览器会缓存该动画的“已完成”状态。即使你用 JS 改写 element.style.animation 为相同值（比如加个空格），或切换到同名动画，浏览器仍认为这是“同一个动画实例”，不会重新触发。
- 现象：点击按钮第一次动，第二次点没反应；
animationend事件只触发一次 - 根本原因：不是样式没变，而是动画生命周期已终结，浏览器跳过了启动逻辑
-
animation-fill-mode: forwards会让终态样式“粘住”，但清空animation-name不会自动撤销它
可靠重播：三步强制重排法
核心是让浏览器同步丢弃旧动画上下文——先切断、再触发重排、最后恢复动画。
- 第一步：设
el.style.animation = 'none'（不能用''，空字符串可能保留旧值） - 第二步：读一个触发重排（reflow）的属性，例如
void el.offsetHeight或getComputedStyle(el).transform - 第三步：立即恢复完整动画值，如
el.style.animation = 'bounce 0.3s ease'
封装成函数更安全：
function replayAnimation(el, animationName, duration = '0.3s') {
el.style.animation = 'none';
void el.offsetHeight;
el.style.animation = `${animationName} ${duration} ease`;
}
纯 CSS 方案：用 animation-direction: alternate 回到起点
如果目标只是“播完视觉上回到初始状态”，不用 JS 更轻量。
- 动画
@keyframes必须从初始态 → 目标态定义（如0% { transform: scale(1); }→100% { transform: scale(1.2); }） - 类中设
animation: pulse 0.4s ease-in-out 2 alternate，播两次，第二次反向，终点即起点 - 此时可配
animation-fill-mode: forwards，最终停在0%帧，视觉完全复位
容易被忽略的陷阱
很多问题出在细节叠加：
- 元素已有 inline
transform，而@keyframes也操作transform，会导致起始位置偏移 - Vue/React 中 class 切换不触发重播，因 DOM 复用，需加唯一
key或手动 force reflow - IE11 不支持
animation重置技巧，得降级用transition + class切换 -
animation-play-state: paused对已结束的单次动画无效，暂停后想重播，仍要走重排流程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
