JSFiddle - React, Tailwind, and code Playground

by alsadi

HTML

<div id="ball" class="ani"></div>

CSS

.ani {
 -webkit-animation-name: round;
 -moz-animation-name: round;
 -webkit-animation-duration: 2s;
 -moz-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -webkit-animation-direction: normal;
 -moz-animation-direction: normal;
 -webkit-animation-timing-function: cubic-bezier( 0.6, 0, 0.4, 1.0 );
 -moz-animation-timing-function: cubic-bezier( 0.6, 0, 0.4, 1.0 );
 }
 
 #ball{
 border-radius:50px;
 width:50px;
 height:50px;
 background:#c00;
 position:absolute;
 top:0;
 left:0;
 }
 
@-moz-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}

@-webkit-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}