每 3 秒重复一次动画

我正在使用 WOW.js 和 animate.css，现在我正在将 CSS 运行到 Infinite。我想知道如何让我的课程运行 3 秒停止并再次开始到无限？

My html:

<img src="images/fork.png" class="fork wow rubberBand"  >

我的 CSS 类：

.fork {
    position: absolute;
    top: 38%;
    left: 81%;
    max-width: 110px;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-delay: 5s;

}

解决方案可以是 JS 或 CSS3。

对于纯 CSS3 动画，在动画的每次迭代之间添加延迟的一种方法是修改关键帧设置，以便它们产生所需的延迟。

在下面的代码片段中，正在执行以下操作：

• 整个动画持续时间为6秒。为了实现延迟，整个持续时间应该是动画实际运行的持续时间+时间延迟。这里，动画实际运行了 3 秒，我们需要 3 秒的延迟，因此持续时间设置为 6 秒。
• 对于动画的前 50%（即 3 秒），没有任何反应，元素基本上保持其位置。这给出了应用 3 秒延迟的外观
• 对于接下来 25% 的动画（即 1.5 秒），元素向下移动 50px，使用transform: translateY(50px).
• 对于动画的最后 25%（即最后 1.5 秒），元素向上移动 50px，使用transform: translate(0px)（回到原来的位置）。
• 整个动画会重复无数次，每次迭代最终都会有 3 秒的延迟。

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(0px);}
  75% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

The animation-delay属性仅在第一次迭代中引入延迟，因此不能用于在每次迭代之间添加延迟。下面是说明这一点的示例片段。

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
  animation-delay: 3s;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>