每3秒重复动画 [英] Repeat animation every 3 seconds

问题描述

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

我的html：

 < img src =images / fork.pngclass =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秒） ，没有什么发生，元素基本上保持其位置。在下一个25％的动画（即1.5秒）中，元素使用向下移动50像素。


• 对于动画的最后25％（即，最后1.5秒），元素向上移动50像素，使用 transform：translate（0px）（回到其原始位置）。


• 整个动画重复无限次，

  div {height：100px; width：100px; border：1px solid;动画：移动6s无限向前;} @ keyframes move {0％{transform：translateY（0px）;} 50％{transform：translateY（0px）;} 75％{transform：translateY（50px）;} translateY（0px）;}}  

 < script src = https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\"> ;</script><div>一个内容< / div>  
 

---

动画-delay 属性仅对第一次迭代引入延迟，因此它不能用于在每次迭代之间添加延迟。下面是一个示例代码片段说明这一点。

  div {height：100px; width：100px; border：1px solid;动画：移动6s无限向前; 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>一个内容< / div>  

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?

My html:

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

My CSS class:

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

}

The solution can be in JS or CSS3.

解决方案

With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.

In the below snippet, the following is what is being done:

• The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
• For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
• For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
• For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
• The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.

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 property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.

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>

这篇关于每3秒重复动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！