动画中的Settimeout

时间:2016-02-19 03:44:34

标签: javascript jquery css animation

如何在我的动画中实现下面的代码,我的动画处于无限循环中我想在每个动画后它将暂停10秒然后重新开始,我使用animate.css

注意:我粘贴了

下面的关键帧
CFRunLoopRun()

HTML + CSS代码

setTimeout(function() {  
  // 1000 == 1 seconds
  // modify dom elements here  
  // your code here
}, 1000);

1 个答案:

答案 0 :(得分:0)

尚未尝试animate.css,但应该可以使用现有css,将animation-delay调整为10s,将animation-direction调整为alternateanimation-fill-modeforwards



.motext {
  animation-name: x;
  animation-duration: 20s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  width: 90%;
  max-width: 1170px;
  margin: auto;
  text-align: right;
  position: relative;
  color: blue;
}
@keyframes x {
  0% {
    color: blue;
  }
  100% {
    color: red;
  }
}

<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>
&#13;
&#13;
&#13;