如何增加无限循环 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 属性来增加元素开始“动画化”和动画有效开始之间的时间。但是这个延迟只适用于第一次迭代之前，而不适用于连续迭代之间。

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

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

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

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

How can I increase the delay between my infinite lopping CSS animation?

html

css

css-animations