Как зациклить несколько анимаций последовательно в CSS?

Question

[Ксения]

Всем привет! Есть два анимированных блока, для каждого установлена анимация. Если проиграть ее последовательно 1 раз, то все ок. А как зациклить их? Чтобы:
а) проигралась анимация блока 1
б) проигралась анимация блока 2 (с задержкой после блока 1)
в) а)
г) б)

и так до бесконечности?
пример: https://jsfiddle.net/TGNC/rL1bnLy9/

Answer 1

[Ivan Bogachev]

@keyframes red {
    0% { left: -100px; }
    50% { left: 110px; }
    100% { left: 110px; }
} 
   
@keyframes red2 {
    0% { left: -100px; }
    50% { left: -100px; }
    100% { left: 100px; }
}

Потом убираете animation-delay и добавляете inifinite вот туда:

animation: red2 5s linear infinite;

P.S.: лучше использовать transform: translateX(...), а не изменять значения left/right - вопрос производительности.

Comments

[Василь Бойко]

здесь вообще лучше не через смещения делать, а через ширину

[Ксения]

Низкий поклон и благодарности