<div id="redball"></div>
@keyframes bounce {
  from, to {
    transform: translateY(30vh) scaleY(.98);
  }
  80% {
    transform: translateY(15vh) scaleY(1.02);
  }
}
#redball {
  border-radius: 50%;
  width: 20vw;
  height: 20vw;
  max-width: 250px;
  max-height: 250px;
  background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
  margin: 0 auto;
  transform-origin: center bottom;
  animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js