Как зациклить много css-анимаций как одну?

Question

[Andrew Chil]

Добрый день! Скажите пожалуйста можно ли зациклить css-анимацию?
На данный момент есть много анимаций, которые привязаны к разным элементам. Вопрос можно ли их как-то объединить в одну анимацию и ее зациклить? Или какие еще есть варианты такое сделать?
Буду очень благодарен за помощь!

Answer 1

[Максим Тимофеев]

Запускать последовательно через js.
Или как вариант с задержкой поиграться. То есть 2-я анимация имеет задержку равную циклу первой, а у первой после выполнения задержка равная длине всего цикла - первая. Тогда каждую отдельно циклим, а результат нужный.

Comments

[Andrew Chil]

Это ясно, думал есть вариант css-ом сделать. Пробовал добавлять и удалять класс через setInterval но анимация не обновляеться

Answer 2

[Andrew Chil]

Нашел такое решение, может кому пригодиться. Правда, не пойму что делает void здесь. Если кто объяснит буду благодарен.

function refreshAnimation() {
        ban.classList.remove("banner-animate");
        void ban.offsetWidth;
        ban.classList.add("banner-animate");
    }

Answer 3

[Eugene]

Про infinite слышали?
К примеру:
animation-iteration-count:infinite;

Comments

[Максим Тимофеев]

Вы вопрос читали? Ему не 1 анимашку надо зациклить, а несколько. Пустить ряд анимашек покругу, не каждую а 1, потом 2-я, потом 3-я.