JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<div class="block1"></div>
<div class="block2"></div>

CSS

.block1, .block2{
    width: 100px;
    height: 100px;
}
.block1{
    background: red;
    display: none;
}
.block2{
    background: green; 
    display: none;
}

JavaScript

setInterval(function(){
	loopingAnimation();
}, 6000);

function loopingAnimation(){
    $('.block1').fadeIn(1000).delay(1000).fadeOut(1000); 
    setTimeout(function(){
        $('.block2').fadeIn(1000).delay(1000).fadeOut(1000);
    }, 3000); 
}

loopingAnimation();