CSS3, HTML slow animation 'train' - html

Question

Please help me to resolve animation issue, here is a link and code:
https://fiddle.jshell.net/gvopk1qe/37/
Description of issue:
This 'train' is infinity but after once the yellow rectange is covered by blue rectangle. You see yellow, black, red, blue rectangle and then should be yellow again, black, red and blue but yellow is covered by blue.
Please help me to resolve this.
Thanks.

Answer 1

Exact problem : animation-delay property is used. It will delay by assigned time before starting animation each time. Therefore, first cycle is good but second cycle onward everything breaks.
Suggested Fix
I would say don't use animation-delay property instead arrange the div's so that they are next to each other and then animate them.
Example Snippet:
/* steps animation */
.steps-animation {
position: relative;
width: 1200px;
height: 250px;
float: left;
background: lightgrey;
border: 1px solid black;
overflow: hidden;
}
.steps-animation span {
display: inline-block;
position: relative;
top: 32%;
left: -100%;
width: 160px;
height: 80px;
margin-left: 100px;
-webkit-animation: stepmoveone 6s linear infinite;
animation: stepmoveone 6s linear infinite;
}
.steps-animation .step1 {
background: yellow;
}
.steps-animation .step2 {
background: black;
}
.steps-animation .step3 {
background: red;
}
.steps-animation .step4 {
background: blue;
}
#keyframes stepmoveone {
to {
left: 100%;
}
}
<div class="steps-animation">
<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
</div>
**Need to edit margin-left, height and width as per requirement.

Answer 2

The problem is in timming. I haven't worked too much with animations but I think I know what's the problem. The animation has a loop set on this line
animation: stepmoveone Xs linear infinite;
This will initially wait X seconds but will also show the animation in an X seconds interval. So it will take X seconds for the animation to complete.
In your code you set X to 18 seconds but this is the same time the last div (the blue one) will wait to be animated. So it will be animated exactly when a new cycle of the animation begins. But when this happens the yellow div will show up so the two of them will overlap. You can check this by changing the delay time for the yellow div to 1s.
To fix this you can change the animation time to 24 for example.
Here's the code but with the seconds changed:
/* steps animation */
.steps-animation {
position: relative;
width: 800px;
height: 250px;
float: left;
background: lightgrey;
border: 1px solid black;
overflow: hidden;
}
.steps-animation span {
display: block;
position: absolute;
top: 32%;
left: -100%;
width: 160px;
height: 80px;
-webkit-animation: stepmoveone 8s linear infinite;
animation: stepmoveone 8s linear infinite;
}
.steps-animation .step1 {
animation-delay: 0s;
background: yellow;
}
.steps-animation .step2 {
animation-delay: 2s;
background: black;
}
.steps-animation .step3 {
animation-delay: 4s;
background: red;
}
.steps-animation .step4 {
animation-delay: 6s;
background: blue;
}
#keyframes stepmoveone {
to {
left: 100%;
}
}
<div class="steps-animation">
<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
</div>
This code will leave a 2 seconds gap between each element.

Answer 3

Set .steps-animation width to 100% && .steps-animation span to negative of its width to hide from the frame
Check the fiddle