Multiple sequential animations in infinite loop - css

Question

I want to have two animations applied to an element. These animations will execute sequentially infinite number of times. I want to use pure CSS without JS.
#keyframes show {
from,
to {
z-index: 100;
}
}
#keyframes wait {
from,
to {
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 1s show infinite, 1s wait infinite;
}
.block-a {
background-color: red;
animation-delay: 0s, 1s;
}
.block-b {
background-color: purple;
animation-delay: 1s, 2s;
}
.block-c {
background-color: yellow;
animation-delay: 2s, 3s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>
Here is my current solution on codepen: https://codepen.io/olafvolafka/pen/oNpPeqj
The issue is the animation stops after the last animation and doesn't repeat.

Answer 1

Here below you will see an implementation of A Haworth's Comment to enforce the z-index at the end of each animation iteration to return to the same value it was at the start (this case: -100).
Doing this is with the keyframe 50% setting the z-index at the front (100) . So that when each animation ends the properties are identical to when it began.
The animation is also set to cycle/repeat every 3 seconds rather than every 1 second as per your original code. This is that each iteration of the animation should run and complete before being called again; so 3 blocks means it runs for 3s. Each block having 1second as per your delay values in each blocks own class CSS code.
I have removed the wait animation because it simply didn't do anything. If you want an animation to wait there are various ways of doing this, not least with keyframes and animation-delay.
#keyframes show {
from {
z-index: -100;
}
50% {
z-index: 100;
}
to {
z-index: -100;
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 3s show infinite;
}
.block-a {
background-color: red;
animation-delay: 0s;
}
.block-b {
background-color: purple;
animation-delay: 1s;
}
.block-c {
background-color: yellow;
animation-delay: 2s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>