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

【问题标题】：How to put a delay on each loop animation in css3?如何在css3中对每个循环动画进行延迟？
【发布时间】：2015-08-30 04:10:07
【问题描述】：

我正在尝试在最后停止循环动画一段时间。

animation: 6s linear 2s infinite;

我尝试使用 css3 简写动画属性将动画延迟设置为 2 秒，但没有成功。

如何做到这一点？

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

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

【问题讨论】：

对于标题中提出的问题 - 不，animation-delay 不是这样工作的。您必须通过调整关键帧设置来手动引入延迟。请查看此线程以了解详细信息 - stackoverflow.com/questions/32223835/…。这是一个非常相似的问题。
@Harry 很酷的伙伴，谢谢

标签： html css animation

【解决方案1】：

我认为你不能单独使用 CSS 来停止动画。但是你可以用JS把class属性改成没有动画的class。

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

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

【讨论】：

【解决方案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中设置

【讨论】：

我可能误解了你的问题，你试图让动画在某个点从无限到 1 停止？
嗨伙计，您的示例中没有动画延迟/：

【解决方案3】：

认为您只是缺少动画名称。

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; }

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

【讨论】：

感谢您的努力，但您的动画没有动画延迟属性/：