<div class="stage">
  <div class="poke bounce"></div>
</div>
.poke {
  display: block;
  margin: 120px auto 0 auto;
  width: 80px;
  height: 80px;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  border-radius: 100%;
  border: solid #37474f 2px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/261948/pokeball.png);
  background-size: contain;
}

.stage {
  border-bottom: solid 3px #eaeaea;
}

.bounce {
  animation-name: bounce;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes bounce {
  0% {  transform: scale(1, 1) translateY(0); }
  10% { transform: scale(1.1, 0.9) translateY(0); }
  30% { transform: scale(0.9, 1.1) translateY(-100px); }
  50% { transform: scale(1.05, 0.95) translateY(0); }
  57% { transform: scale(1, 1) translateY(-7px); }
  64% { transform: scale(1, 1) translateY(0); }
  100% { transform: scale(1, 1) translateY(0); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.