Is it possible to apply two animations to an element using only CSS and without the need for JavaScript? These animations should run sequentially an infinite number of times.
@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> If you'd like to see my implementation, check it out on codepen: https://codepen.io/olafvolafka/pen/oNpPeqj
The one issue I'm facing is that the animation stops after the last sequence instead of repeating as desired.