Little problem on this code - CSS animation

Question

On this code, there are 8 blocks. They each have the same animation, but different animation delay(0.1++s).

The animation goes like this 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, ....
When it gets on the last block (8), there Is delay before it starts back to one.

I can't figure out why.

Let me know If u have any ideas on how to fix the delay (8) and make the animation go smoother.

https://code.sololearn.com/W3bXigEyGeP6/?ref=app

Answer 1

Add some changes to run smoother.

.loader{
animation: ldr 0.8s infinite
}
.loader:nth-child(1) {
animation-delay:0.8s
}
.loader:nth-child(2){
animation-delay: 0.1s
}
.loader:nth-child(3){
animation-delay: 0.2s
}
.loader:nth-child(4){
animation-delay: 0.3s
}
.loader:nth-child(5){
animation-delay: 0.4s
}
.loader:nth-child(6){
animation-delay: 0.5s
}
.loader:nth-child(7){
animation-delay: 0.6s
}
.loader:nth-child(8){
animation-delay: 0.7s
}