<div class="bouncingball"></div>
.bouncingball {
  width:150px;
  height:150px;
  border-radius:100%;
  background:#DEF245;
  animation-name: bounce;
  animation-duration: 1s;
  transform: translateY(0px);
  animation-iteration-count: infinite;
  position:relative;
  margin:auto;
}

@keyframes bounce {
	0% {top: 0;}
	50% {top: 140px;height: 140px;animation-timing-function: ease-out;}
	55% {top: 160px;height: 120px;animation-timing-function: ease-in;}
	65% {top: 120px;height: 140px;animation-timing-function: ease-out;}
	100% {top: 0;animation-timing-function: ease-in;}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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