Fixing animation loop in CSS loader - html

Question

I have a loader animation in CSS. It rotates 4 divs in a circular fashion. The issue I'm having is that the 4th div (red) is shown initially with no fade in disrupting the flow of the animation (you may have to refresh to see).
What would be the best way to fix this so that the animation's loop is improved?
The Code (https://jsfiddle.net/bduaxvmp/):
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
background: red;
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>

Answer 1

Solution:
Set the animation-fill-mode as backwards for the animation. Using this option for the fill mode will make the elements take the state as at the 0% frame during the animation-delay period and hence all the elements will be transparent and in their translated position till the animation actually kicks in.
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite backwards;
}
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite backwards;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
background: red;
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
#keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
Alternately, you could set the same properties as the 0% frame to the element's default state also and avoid setting animation-fill-mode to backwards but I feel that it is a repetition that could be avoided for this case.
Reason:
The issue I'm having is that the 4th div (red) is shown initially with no fade
Note that the problem is not just the 4th div. Actually the problem is for all the div elements that have the animation delay. Visually only 4th div exhibits the problem because all are absolutely positioned and the 4th div appears on top of the rest due to it being later in the DOM.
If you set a different background color and a higher z-index to the 3rd or 2nd div, you'd see that the same problem happens for them also.
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 1s infinite;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
/*background: blue;
z-index: 4 */
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
background: yellow;
z-index: 2;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
/*background: red;*/
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
#keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
The reason this problem happens is because of the way in which animations work. Any animation will continue to hold its default state (specified outside of the animation) till the time the delay timer expires. Setting animation-fill-mode as backwards makes the animation take the state as at first applicable frame even during the delay period and thus avoids the issue.
From MDN:
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.