JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<div class='area'>
  <div class='ball bounce'>
  </div>
</div>

CSS

.area{
  width: 600px;
  height:250px;
  padding-top:200px;
  
  background-color: #EFEFEF;
  border-bottom: 3px solid darkgrey;
  
  position:relative;
}

.ball{
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:purple;
  margin: 0 auto;
}

.bounce{
  -webkit-animation: bouncing linear 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 100%;

}


@-webkit-keyframes bouncing {
  0% {
    -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    -webkit-transform:  translate(0px,75px)  scaleX(1.00) scaleY(1.00) ;
  }
  45% {
    -webkit-transform:  translate(0px,200px)  scaleX(0.75) scaleY(1.25) ;
  }
  50% {
    -webkit-transform:  translate(0px,200px)  scaleX(1.45) scaleY(0.27) ;
  }
  55% {
    -webkit-transform:  translate(0px,200px)   scaleX(0.75) scaleY(1.25) ;
  }
  75% {
    -webkit-transform:  translate(0px,75px)  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
}