如何实现CSS动画每间隔5秒循环重启播放

你要的动画每轮播放结束后停顿5秒再无限重启的效果，有两种常用实现方式，按需选择即可：

纯CSS实现（无JS，性能最优） #

不要直接靠animation-iteration-count: infinite硬循环，把停顿时间直接整合进动画周期里即可：

• 先计算总动画时长：总时长 = 动画单次播放时长 + 你需要的停顿间隔（5秒）
• 修改关键帧规则，让动画动效只在周期前半段走完，后半段保持结束状态静止，模拟停顿效果。

举个实际例子，假设你的预加载动画单次播放需要2秒，总时长就设为7秒：

.preloader {
  /* 动画总时长设为7秒，无限循环 */
  animation: preloaderSpin 7s infinite ease;
}

@keyframes preloaderSpin {
  /* 原有所有关键帧节点按比例换算位置：原100%节点挪到 (2/7)*100 ≈ 28.6% 的位置 */
  0% {
    transform: rotate(0deg);
    opacity: 0.5;
  }
  28.6% {
    /* 这里放原来动画100%结束时的状态 */
    transform: rotate(360deg);
    opacity: 1;
  }
  /* 28.6%到100%的时间段保持结束状态不变，这一段就是5秒的停顿期 */
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

注意：animation-delay属性只会在动画第一次播放前生效，后续循环不会触发延迟，不要尝试用这个属性做循环间隔。

JS控制实现（逻辑直观，易调整） #

如果不想换算关键帧比例，可以用JS监听动画结束事件，手动控制动画重启时机：

• 先把动画规则单独放在一个类里，设置动画只播放1次
• 监听元素的animationend事件，动画播完后移除动画类，等待5秒再重新加回类触发重播。

代码示例：

/* 动画单独放在类里，仅播放1次 */
.preloader-anim {
  animation: preloaderSpin 2s ease forwards;
}

const preloaderEl = document.querySelector('.preloader');
// 初始默认加动画类，第一次自动播放
preloaderEl.classList.add('preloader-anim');

preloaderEl.addEventListener('animationend', () => {
  // 动画结束先移除动画类
  preloaderEl.classList.remove('preloader-anim');
  // 触发浏览器重绘，避免类切换被缓存导致动画不重启
  void preloaderEl.offsetWidth;
  // 停顿5秒后重新加类，触发下一轮播放
  setTimeout(() => {
    preloaderEl.classList.add('preloader-anim');
  }, 5000);
});

两种方案都能稳定实现间隔循环效果，纯CSS方案更轻量适合预加载场景，JS方案调整间隔和动画时长更灵活。

内容的提问来源于stack exchange，提问作者RAHUL KUNDU