.bouncingball {
  width:140px; /*makes the ball 140 pixels wide*/
  height:140px;/*makes the ball 140 pixels high*/
  border-radius:50%; /*makes things have curved corners*/
  background:#CCC; 
  animation: bounce 0.5s;
  transform: translateY(0px);
  animation-iteration-count: infinite;
  position:relative;
  margin:50px;
}

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