Question

我正在使用WOW.js和animate.css，现在我正在运行我的CSS到无限。我想知道如何让我的课程停止运行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秒），元素使用transform: translateY(50px)向下移动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>

Answer 2

喜欢这个

<强> HTML

<div class="halo halo-robford-animate"></div>

<强> CSS

body{
  background: black;
}

.halo{
  width: 263px;
  height: 77px;
  background: url('http://i.imgur.com/3M05lmj.png');
}

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leaves {
   0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5
    }

    100% {
        opacity: 1;
    }
}

<强> jsfiddle

每3秒重复一次动画

2 个答案: