JSFiddle - React, Tailwind, and code Playground

by alsadi

HTML

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

CSS

.bounce {
  -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
  -webkit-animation-duration: 2s;
 -moz-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
 -moz-animation-direction: alternate;
 -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;
 }
 
 @-webkit-keyframes bounce {
  from { left: 0px; }
  to { left: 100px; }
 }

@-moz-keyframes bounce {
 from { left: 0px; }
 to { left: 100px; }
}