Question

我正试图在一段时间内停止循环动画。

animation: 6s linear 2s infinite;

我尝试使用css3短缺动画属性将动画延迟2秒，但它没有用。

如何解决这个问题？

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

修改这个方法解决了我的问题：stackoverflow.com/a/32223950/1428241

Answer 1

我不认为你可以单独使用CSS来停止动画。但是你可以使用JS在一段时间后将class属性更改为没有动画的类。

var element = document.getElementById('myElement');
setTimeout(function(){ element.className = 'newClass'; }, 2000);

编辑：这是一个小提琴http://jsfiddle.net/Nillervision/8ncgs94k/

Answer 2

使用：

Calling the keyframe via animation:

animation:keyFrameName 6s infinite;
-webkit-animation:keyFrameName 6s infinite;
-moz-animation:keyFrameName 6s infinite;
-o-animation:keyFrameName 6s infinite;


Making a delay for animation:

animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;

应该在每个动画类或你有动画的id

中设置

Answer 3

认为你只是错过了动画名称。

＆＃13;

li {
           /* name, dur, func, delay, iterations */
    animation: woohoo 2s linear 3s infinite
}
li:last-child {
    animation-delay: 8s;
}

@keyframes woohoo {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
ul { max-width: 90%; overflow: hidden; }

＆＃13;

<ul>
  <li>Lorem ipsum dolor</li>
  <li>sit amet</li> 
  <li>consectetur adipisicing elit</li>
  <li>Earum deleniti itaque</li>
</ul>

＆＃13;

如何在css3中对每个循环动画进行延迟？

3 个答案: