JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first"></div>
   <div id="1"></div>
   <div id="2"></div>
   <div id="3"></div>
   <div id="4"></div>
   <div id="5"></div>

CSS

body div {
display: block;
float:left;
margin:10px;
height:50px;
width:50px;
background: green;
opacity: 0;
}

JavaScript

var licznik=0;
function show_anim(){
         if(licznik!=9999){//10 obiegów pętli
         $("#first").delay(500).animate({"opacity": "1"}, 1500);
         $("#first").delay(1500).animate({"opacity": "0"}, 1500);
         $("#1").delay(4500).animate({"opacity": "1"}, 1500);
         $("#1").delay(1500).animate({"opacity": "0"}, 1500);

         $("#2").delay(4800).animate({"opacity": "1"}, 1500);
         $("#2").delay(1500).animate({"opacity": "0"}, 1500);

         $("#3").delay(5300).animate({"opacity": "1"}, 1500);
         $("#3").delay(1500).animate({"opacity": "0"}, 1500);

         $("#4").delay(5600).animate({"opacity": "1"}, 1500);
         $("#4").delay(1500).animate({"opacity": "0"}, 1500);

         $("#5").delay(5900).animate({"opacity": "1"}, 1500);
         $("#5").delay(1500).animate({"opacity": "0"}, 1500);
         licznik++;
         console.log(licznik);
         }
   }
   
$(document).ready(function(){

show_anim()
      

setInterval("show_anim()",12000);
});