JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div id="mis">red</div>
<div id="vis">green</div>
<div id="alum">blue</div>

CSS

@keyframes ani1{
from{opacity:1;}
to{opacity:1;}
}

@keyframes ani2{
from{opacity:1;}
to{opacity:1;}
}

@keyframes ani3{
from{opacity:1;}
to{opacity:1;}
}

#mis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani1 5s linear 0s infinite;
background-color:red;
}

#vis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani2 5s linear 5s infinite;
background-color:green;
}

#alum{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani3 5s linear 10s infinite;
background-color:blue;
}