html - 如何增加无限跳跃 CSS 动画之间的延迟？

Question

我之前看过这个讨论，但它通常用于具有 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);
  }
}

谢谢，

Answer 1

设置时animation-iteration-count至 infinite ，动画将永远重复。没有本地方法可以增加两次迭代之间的时间。
但是，您可以通过设置 animation-delay 来增加元素开始“动画化”和动画有效开始之间的时间。属性(property)。但是这个延迟只在第一次迭代之前应用，而不是在连续迭代之间。
为了达到你想要的结果，你有两种方法:

修改动画，使您想要的延迟包含在动画循环中(这是最常用的方法)。使用此技术，暂停设置为整个动画迭代的百分比，因此您无法将动画速度与实际元素动画之间的时间分离。

使用类应用动画并编写一个小脚本，在适当的时间应用和删除该类。这种技术的优点是将动画的持续时间与应用程序之间的时间分离，特别是在 animation-iteration-count 的情况下非常有用。设置为 1 .另请注意使用此技术 animation-delay如果您已将其设置为有效的真值，则每次应用该类时都适用。

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