Перезапустить несколько анимаций 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 ,