How to loop multiple animations sequentially in CSS?

Question

css

Hello! There are two animated blocks, animation is set for each. If you play it consecutively 1 time, then everything is ok. And how to loop them? So that:
a) the animation of block 1 is
played b) the animation of block 2 is played (with a delay after block 1)
c) a)
d) b)
and so on ad infinitum?
example: https://jsfiddle.net/TGNC/rL1bnLy9/

Answer 1

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

Then you remove the animation-delay and add inifinite there:
PS: it's better to use transform: translateX(...) than to change the left/right values ​​- it's a performance issue.