JSFiddle - React, Tailwind, and code Playground

HTML

<div id="anim1" class="anim">1</div>
<div id="anim2" class="anim">2</div>
<div id="anim3" class="anim">3</div>
<div id="anim4" class="anim">4</div>
<div id="anim5" class="anim">5</div>
<div id="anim6" class="anim">6</div>
<div id="anim7" class="anim">7</div>

CSS

.anim{
width:18px;
height:20px;
background-color:blue;
    float:left;
   display:none;
    color:white;
}
#anim1{
margin-left:0px;
}
#anim2{
margin-left:20px;
}
#anim3{
margin-left:40px;
}
#anim4{
margin-left:60px;
}
#anim5{
margin-left:80px;
}
#anim6{
margin-left:100px;
}
#anim7{
margin-left:120px;
}

JavaScript

cyanBlick();
var intervalID;
intervalID = setInterval(cyanBlick, 7000);

function cyanBlick() {
    $(".anim").each( function(indx, element) {
        $(element).delay(indx * 1000).fadeIn(250).delay(500).fadeOut(250);
    });
}