重新启动多个CSS3动画

Question

如果您使用逗号分隔值来声明多个CSS3动画，那么如何重新启动整个动画呢？首先运行slideUp，然后运行fadeOut（使animation-delay属性成为可能），然后重新启动。

.mySelector {
   myAnimation: 
     -webkit-animation:  slideUp 0.5s ease-in-out 0 1 normal forwards running, 
                         fadeOut 1s ease-in-out 2s 1 normal forwards running;
}

Answer 1

您可以通过再次删除和添加元素来执行此操作：

var elm = document.querySelector(".mySelector");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);

https://css-tricks.com/restart-css-animation/

Answer 2

您需要添加到动画属性：

  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;

完整参考check the documentation。