css - 重启多个 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/