Cacher is the code snippet organizer for pro developers

html {
  background-color: #303040;
}

div {
  margin: 2rem auto;
  background-color: skyBlue;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  animation: .75s bounce infinite;
}

html:hover div {
  animation-play-state: paused;
}

@keyframes bounce {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(.78,.01,.83,.67);
    box-shadow: none;
  }
  
  25%, 45% {
    width: 90px;
    height: 110px;
    box-shadow: 0 -5px 3px skyblue, 0 -6px 6px skyblue;
  }
  
  50% {
    width: 90px;
    height: 110px;
    transform: translateY(350px);
    filter: blur(2px);
    box-shadow: none;
  }
  
  55% {
    transform: translateY(360px);
    width: 110px;
    height: 90px;
    box-shadow: -5px 0px 3px skyblue, 5px 0px 3px skyblue;
  }
  
  75% {
    width: 90px;
    height: 110px;
    box-shadow: 0 5px 3px skyblue, 0 6px 6px skyblue;
  }
  
  100% {
    transform: none;
    animation-timing-function: ease-in;
    box-shadow: none;
  }
}

<div></div>