如何在 CSS 动画循环之间添加停顿间隔

在CSS动画的实际开发中，我们经常需要实现动画循环播放时中间有停顿间隔的效果，比如轮播图切换后停留几秒再开始下一次切换，或者图标闪烁时亮灭之间有间隔。下面介绍几种常见的实现方式。

方法一：调整动画总时长与关键帧分布

这种方法的思路是让动画的总时长等于单次动画播放时长加上停顿时长，然后在关键帧中只让前半段执行动画，后半段保持最终状态，这样循环时就会出现停顿效果。

比如我们要实现一个元素从左到右移动，移动过程持续2秒，停顿1秒后再重复，那么总动画时长就是3秒，关键帧中0%到66.6%（2/3）执行移动，66.6%到100%保持移动后的位置。

/* 定义移动动画 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  /* 2秒对应总时长3秒的66.6% */
  66.6% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(200px);
  }
}

/* 应用动画 */
.box {
  width: 50px;
  height: 50px;
  background: #409eff;
  /* 动画总时长3秒，无限循环 */
  animation: move 3s infinite linear;
}

方法二：使用animation-delay配合两次动画

如果需要更灵活的停顿控制，可以把动画拆成两个交替执行的动画，利用animation-delay设置第二个动画的延迟，实现循环间的停顿。

这种方式适合需要不同停顿时长的场景，通过调整延迟时间就能快速修改停顿间隔。

@keyframes move-forward {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background: #409eff;
  /* 第一次动画持续2秒，结束后延迟1秒执行第二次动画 */
  animation: move-forward 2s 1s infinite linear;
}

方法三：用animation-play-state控制暂停

还可以通过JavaScript配合animation-play-state属性控制动画的播放和暂停，实现自定义时长的停顿间隔。

这种方式适合需要动态修改停顿时长的场景，不需要重新定义CSS动画。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background: #409eff;
  animation: move 2s linear infinite;
}

/* 暂停状态的样式 */
.paused {
  animation-play-state: paused;
}

// 获取元素
const box = document.querySelector('.box');
let isPaused = false;

// 每2秒动画播放结束后，暂停1秒
setInterval(() => {
  if (!isPaused) {
    box.classList.add('paused');
    isPaused = true;
    // 1秒后恢复播放
    setTimeout(() => {
      box.classList.remove('paused');
      isPaused = false;
    }, 1000);
  }
}, 2000);

不同方案的对比

我们可以根据需求选择合适的方案，下面是三种方案的适用场景对比：

注意事项

• 使用关键帧方案时，要注意总时长的计算，避免关键帧比例错误导致动画效果不符合预期。
• 如果使用animation-delay的负值，可以实现动画从中间状态开始播放，这个特性可以结合循环停顿实现特殊的动画效果。
• 当动画有animation-fill-mode: forwards属性时，要注意动画结束后状态的保持是否会影响下一次循环的初始状态。

实际开发中，优先选择纯CSS的实现方案，只有当需要动态修改参数时才考虑引入JavaScript，这样能减少项目的复杂度，提升页面性能。

CSS_animationanimation-delayanimation-iteration-count关键帧动画修改时间：2026-06-18 04:18:34