Question

我正在使用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>

Answer 1

in the docs，我的朋友：

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

Answer 2

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

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

h1 {
  animation: color 6s infinite;
}

@keyframes color {
  0% {
    color: black;
  }
  17% {
    color: red;
  } 
  18% {
    color: black;
  }
}

<h1>hello</h1>

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

2 个答案: