如何为无限循环的CSS动画添加每次迭代之间的间隔延迟？

你当前代码中设置的 animation-delay 仅会在动画第一次启动前生效，进入循环迭代阶段后不会重复触发延迟，因此无法实现每次弹跳之间增加间隔的需求。

可以通过调整动画总时长+重设关键帧百分比的方案实现需求，核心逻辑是将间隔时间纳入动画总时长，让弹跳动作仅在总时长的前2秒按原有效果执行，剩余时间保持元素静止，以此模拟每次动画迭代之间的间隔。

以下是实现每次弹跳间隔3秒的完整代码示例：

.fl-icon-wrap{
  -moz-animation: bounce 5s infinite; /* 2s动画时长 + 3s间隔 = 总时长5s */
  -webkit-animation: bounce 5s infinite;
  animation: bounce 5s infinite;
  /* 若需要动画第一次启动前也延迟，可单独保留animation-delay配置，不影响循环间隔效果 */
}

@keyframes bounce {
  /* 前40%时长（对应2s）按原有弹跳逻辑执行，所有原关键帧百分比乘以0.4换算得到新值 */
  0%, 8%, 20%, 32%, 40% {
    transform: translateY(0);
  }
  16% {
    transform: translateY(-30px);
  }
  24% {
    transform: translateY(-15px);
  }
  /* 剩余60%时长（对应3s）保持静止，模拟间隔 */
  40% to {
    transform: translateY(0);
  }
}

如果需要自定义间隔时长，可按以下步骤调整：

• 设你需要的间隔为X秒，将动画总时长设置为 2 + X 秒
• 计算比例系数 = 2 / (2 + X)
• 将原有@keyframes内的所有百分比值乘以该系数，得到新的关键帧时间点
• 新增 [系数*100%] to 的关键帧规则，固定transform: translateY(0)即可

内容的提问来源于stack exchange，提问作者Kyle White