CSS动画暂停后重播不能仅靠重新触发animation声明，需打断当前动画实例并触发新实例，常用方法是移除animation样式后强制重排（如offsetHeight），再恢复原声明。
CSS动画暂停后重播，**不能仅靠重新触发animation声明本身来实现**。直接修改animation属性（比如改个时长或名字）在多数情况下不会触发重播，因为浏览器会将其视为“无实质变更”而跳过重绘流程。
暂停动画的正确方式
使用animation-play-state: paused可暂停正在运行的动画，但它只是暂停，不重置播放进度——再次设为running会从暂停处继续，而非从头开始。
- 暂停：设置
animation-play-state: paused - 恢复：设回
running→ 动画继续，不是重播
实现“暂停后重播”的核心方法：重置动画状态
真正让动画从头开始，关键在于**打断当前动画实例并触发新实例**。常用可靠手段是：
-
强制重排（reflow）：移除元素的
animation相关样式（如清空animation-name），触发浏览器丢弃当前动画上下文，再立即恢复原动画声明 -
利用
animation-iteration-count配合JS控制：先设为0终止动画，再设回原值（如1或infinite） -
切换class + 重排技巧：添加一个临时class移除动画，用
void el.offsetHeight强制同步计算，再移除该class
推荐的JS实现示例
以下代码可安全触发重播：
立即学习“前端免费学习笔记（深入）”；
function replayAnimation(el) {
el.style.animation = 'none';
el.offsetHeight; // 强制重排
el.style.animation = ''; // 恢复原有animation声明
}
或者更稳妥地指定动画名与参数：
el.style.animation = 'myAnim 0.3s ease-in-out'; el.offsetHeight; el.style.animation = 'myAnim 0.3s ease-in-out';
注意transition与animation的区别
别混淆transition和animation：transition响应属性变化，多次快速触发可能被合并；而animation需显式重置才能重播。想“点击就重播”，优先用JS控制class切换+重排，而不是依赖CSS自身重触发。
