每3秒重复一次动画

Question

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

我的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.

Answer 1

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

在下面的代码片段中,以下是正在执行的操作:

• 动画的整个持续时间为6秒.为了获得延迟,整个持续时间应该是动画实际运行的持续时间+时间延迟.这里,动画实际运行3秒,我们需要3秒延迟,因此持续时间设置为6秒.
• 对于动画的前50%(即3秒),没有任何反应,元素基本上保持其位置.这给出了应用3秒延迟的外观
• 对于动画的下一个25%(即1.5秒),元素向下移动50px transform: translateY(50px).
• 对于最后25%的动画(即最后1.5秒),元素使用transform: translate(0px)(返回其原始位置)向上移动50px .
• 整个动画重复无限次,每次迭代最终都会延迟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>

该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>