<div class="balls">
  <div class="ball-1"></div>
  <div class="ball-2"></div>
  <div class="ball-3"></div>
</div>
@keyframes bounce-3rd {
    0% { transform: translateY(0); }
   16% { transform: translateY(-125%); }
   33% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

[class^=ball-] {
  animation: 800ms ease-out bounce-3rd infinite;
}
.ball-1 { animation-delay: 0s; }
.ball-2 { animation-delay: 150ms; }
.ball-3 { animation-delay: 300ms; }




.balls {
  margin: 50px auto;
  width: 100px;
  height: 60px;
  position: relative;
}

[class^=ball-] {
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 0;
  background: black;
  border-radius: 13px;
}
.ball-1 { left: 0; }
.ball-2 { left: calc(50% - 13px); }
.ball-3 { right: 0; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.