如何增加无限循环 CSS 动画之间的延迟？答案

【问题标题】：How can I increase the delay between my infinite lopping CSS animation?如何增加无限循环 CSS 动画之间的延迟？
【发布时间】：2021-08-28 04:34:09
【问题描述】：

我之前已经看到过这个讨论，但它通常用于具有 1 个停止点和结束点的动画。由于我的示例中的箭头正在弹跳https://5pshomes.artrageousdemo.com/，我对它的工作原理有点困惑。如何在动画的每次迭代之间添加几秒钟的延迟，同时保持动画本身 2 秒长？

.fl-icon-wrap{
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
    animation-delay: 2s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

谢谢，

【问题讨论】：

您需要在 15% 和 20% 之间添加一些静态帧，等等。

标签： html css css-animations

【解决方案1】：

将animation-iteration-count 设置为infinite 时，动画将永远重复。没有本地方法可以增加两次迭代之间的时间。

但是，您可以通过设置animation-delay 属性来增加元素开始“动画化”到动画有效开始之间的时间。但是这个延迟只在第一次迭代之前应用，而不是在连续迭代之间。

要达到您想要的结果，您有两种方法：

修改动画，使您想要的延迟包含在动画循环中（这是最常用的方法）。使用这种技术，暂停设置为整个动画迭代的百分比，因此您无法将动画速度与实际元素动画之间的时间分离。
使用类应用动画并编写一个小脚本，在适当的时间应用和删除该类。这种技术的优点是将动画的持续时间与应用程序之间的时间解耦，特别是当animation-iteration-count 设置为1 时它很有用。另请注意，如果您已将其设置为有效的真值，则每次应用该类时都会应用此技术animation-delay。

从技术上讲，还有第三种方法，即在适当的时候使用 JavaScript 将animation-play-state 设置为running/paused，类似于第二种方法。但是，在实践中，如果出于任何原因这与实际动画不同步，它可能会在实际动画中途暂停动画，从用户的角度来看，这会导致“错误”行为所以上面的选项 2 应该总是优先于这种技术上可行的第三种方法。

【讨论】：