JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<div class="punto uno"></div>

CSS

/* amarillo E3ED58*/
.punto{width:200px; height:200px; float:left;
-webkit-transition: all 1s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;

background-size:200% !important;

}
.uno{background:url(http://www.carambamoreno.com/yoli/2/img/animate.svg) 100% bottom no-repeat #59EA71;}
.uno.moving{background-position: 0% bottom;}
.dos{background:url(http://www.carambamoreno.com/yoli/2/img/animate2.svg) 100% bottom no-repeat #E3ED58;}
.uno.moving{background-position: -100% bottom;}

JavaScript

/*function showpanel() {     
    $(".uno").addClass('moving');
		setTimeout(showpanel2, 1000);
 }
 function showpanel2() {     
		$(".uno").removeClass('uno moving');
		$(".punto").addClass('dos'); 
		setTimeout(showpanel3, 1000);
}
function showpanel3() {     
		$(".dos").addClass('moving');
		setTimeout(showpanel4, 1000);
}
function showpanel4() {     
		$(".dos").removeClass('dos moving');
		$(".punto").addClass('uno'); 
		setTimeout(showpanel, 1000);
}
setTimeout(showpanel, 1000);*/