如何在 animate.css 中延迟无限类？答案

【问题标题】：How to delay infinite class in animate.css?如何在 animate.css 中延迟无限类？
【发布时间】：2017-01-23 09:27:38
【问题描述】：

我使用https://daneden.github.io/animate.css/ 来创建css 动画。我目前正在使用无限类以使其重复。但是我想让它每 5 秒左右而不是每秒重复一次。有没有办法用 CSS 或 jQuery 做到这一点？

这是我的代码：

  <div class="row">
                <div class="col-12 name animated infinite zoomIn">
                    <h1>vicki williams</h1>
                </div>
            </div>

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

当然，如果您希望动画每 5 秒重复一次，请将 animation-iteration-count 设置为 infinite 并将 animation-duration 设置为包含您希望动画持续多长时间的值，然后包括 5 秒延迟。

例如，在下面的示例中，animation: color 6s infinite; 将动画设置为 6 秒，在我的动画中，我从黑色渐变到红色最多 17% (1s)，然后立即背靠背并通过其余的动画（5s），然后重复。这是一种在 1 秒内从黑色变为红色的方式，重置并有 5 秒的延迟，然后动画重复。

h1 {
  animation: color 6s infinite;
}

@keyframes color {
  0% {
    color: black;
  }
  17% {
    color: red;
  } 
  18% {
    color: black;
  }
}

&lt;h1&gt;hello&lt;/h1&gt;

【讨论】：

【解决方案2】：

我的朋友是in the docs：

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

【讨论】：

这只会延迟动画的第一次迭代。从它的声音来看，OP 希望动画的每次迭代都发生延迟，而不仅仅是第一次。
是的，所有这些以及更多内容都在文档中。谢谢@MichaelCoker。