JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<div class="yellow">CSSZilla</div>
<div class="yellow">CSSZilla</div>


<div class="green">CSSZilla</div>
<div class="green">CSSZilla</div>

CSS

.yellow {background-color:yellow; margin-top:100px;
	width:100px;
	height:50px;
	display:block;
	position:relative;	
	animation-name:move;
	animation-duration:6s;
	animation-iteration-count:4;	
	 animation-iteration-count: infinite;
	 font-size:26px;
	
	}
	
	
	 @keyframes move {
	 	0% { background-color:orange; left:0px; top:0px;}	 
		25% { background-color:green; left:100px; top:0px;}
		50%  { background-color:#0000FF; left:100px; top:100px;}
		75%  { background-color:#0000FF; left:0px; top:100px;}
		100% { left:0px; top:0px; background-color:#993300;}
	 }
	 
	 
	 .green {background-color:green; margin-top:100px;
	width:100px;
	height:50px;
	display:block;
	position:relative;	
	animation-name:move;
	animation-duration:6s;
	animation-iteration-count:4;	
	 animation-iteration-count: infinite;
	 animation-direction: reverse;
	 animation-timing-function: ease;
	  font-size:26px;
	  
	
	}
		
.rotation{background-color:yellow; margin-top:100px;
	width:100px;
	height:100px;
	display:block;
	position:relative;	
	animation-name:move;
	animation-duration:6s;
	animation-iteration-count:4;	
	animation-iteration-count: infinite;
	font-size:26px;
    transfrom:rotate(360deg);
	transition: width 2s, height 2s, transform 2s;	 
	 }
.rotation:hover{transform: rotate(180deg);}

@keyframes move {
	 	0% { background-color:orange; left:0px; top:0px;}	 
		25% { background-color:green; left:100px; top:0px;}
		50%  { background-color:#0000FF; left:100px; top:100px;}
		75%  { background-color:#0000FF; left:0px; top:100px;}
		100% { left:0px; top:0px; background-color:#993300;}
	 }