CSS动画循环暂停技巧详解

学习文章要努力，但是不要急！今天的这篇文章《CSS 动画循环暂停间隔实现方法》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

`animation-delay` 仅控制首次播放前的延迟，无法在每次循环之间插入停顿；要实现“循环间暂停”，需通过延长动画总时长 + 关键帧设计空闲期（如静止帧）来模拟。

在 CSS 动画中，animation-delay 的作用仅限于动画第一次启动前的等待时间，它不会在每次 iteration（迭代）之间重复生效。因此，像问题中期望的“每轮摇晃后停顿 1 秒”这类效果，直接设置 animation-delay: 1s 是无效的。

✅ 正确思路：将“动画动作 + 暂停”合并为单次完整动画周期，再设为无限循环。

以 fa-shake 为例，原动画持续 1s，若希望每次摇晃后暂停 1s，则新动画总时长应为 2s，其中：

• 0% – 50%（即前 1s）：执行原有摇晃动画；
• 50% – 100%（后 1s）：保持最终静止状态（如 rotate(0deg)），形成视觉暂停。

? 修改后的代码如下：

.fa-shake {
  animation-name: fa-shake-paused;
  animation-duration: 2s; /* 总时长 = 动作时长 + 暂停时长 */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  width: 150px;
  height: auto;
}

@keyframes fa-shake-paused {
  /* 0%–49.9%：执行原摇晃逻辑（压缩至前1秒内） */
  0%, 5%, 15%, 25%, 35%, 45%, 49.9% {
    transform: rotate(0deg);
  }
  5.5%, 16.5%, 27.5%, 38.5%, 49% {
    transform: rotate(10deg);
  }
  11%, 22%, 33%, 44% {
    transform: rotate(-20deg);
  }

  /* 50%–100%：完全静止，模拟1秒暂停 */
  50%, 100% {
    transform: rotate(0deg);
  }
}

? 关键技巧说明：

• 使用百分比关键帧精确分配时间比例（如 50% 对应 1s 处）；
• animation-fill-mode: forwards 确保动画结束帧保持生效（虽此处非必需，但推荐作为良好实践）；
• 避免在 100% 帧使用 transform: none 或未定义值，以防渲染异常。

? 进阶提示：若需更灵活控制（如暂停时长动态调整），可结合 CSS 自定义属性（--pause-duration）与 JavaScript 动态计算关键帧（需配合 @property 或运行时注入样式），但纯 CSS 方案已能满足绝大多数场景。

总结：CSS 动画不支持“迭代间延迟”，但可通过“拉长周期 + 静止帧占位”的方式优雅实现等效效果——本质是把“动-停”封装为原子化的一次动画。

好了，本文到此结束，带大家了解了《CSS动画循环暂停技巧详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！