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实现示例

以下代码可安全触发重播：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

立即学习“前端免费学习笔记（深入）”；

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自身重触发。