Animating items in sequence - html

Question

Like a progress bar:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
}
span:nth-child(1) {
animation: bar 1s linear;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
I'd like the next <span> to blink for a second and then the third one and so on. Is it possible with CSS?

Answer 1

Use the following CSS:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
}
span:nth-child(1){
animation: bar 1s linear 0s forwards;
}
span:nth-child(2){
animation: bar 1s linear 1s forwards;
}
span:nth-child(3){
animation: bar 1s linear 2s forwards;
}
span:nth-child(4){
animation: bar 1s linear 3s forwards;
}
span:nth-child(5){
animation: bar 1s linear 4s forwards;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>

Answer 2

With CSS you can just declare static code, so if you know exactly how many spans will be used there is no problem. If you want something recursive (first then the next one, until there are spans) you can do that only with JS.
Note that in this example I know precisely how many child the p has.
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
animation: bar 5s linear infinite;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
span:nth-child(4) {
animation-delay: 3s;
}
span:nth-child(5) {
animation-delay: 4s;
}
#keyframes bar {
0% {
color: black;
background: white;
}
10% {
color: white;
background: black;
}
11% {
color: black;
background: white;
}
100% {
color: black;
background: white;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>