JSFiddle - React, Tailwind, and code Playground

libs/animejs/1.0.0/anime.min.js

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js"></script>
<div class="ball"></div>

CSS

body {
  //  display:flex;
  //  flex-flow: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #222;
}

.ball {
  width: 5vh;
  height: 5vh;
  background: dodgerblue;
//  position: absolute;
  top: 20px;
  bottom: 0;
  border-radius: 100%;
}

JavaScript

var bouncingBall = anime({
  targets: '.ball',
 	translateY: '90vh',
  duration: 2500,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  scaleX: {
    value: 1.25,
    duration: 1550,
    delay: 550
  },
  
  background: {
  value: "#00ee88",
  delay: 110,     
  duration: 1500,
  }
  
});