<div class="ball-container">
  <div class="ball"></div>
</div>
@keyframes bounce {
    0% { transform: translateY(0); }
  100% { transform: translateY(-200%); }
}

.ball {
  animation: 300ms bounce infinite alternate;
  animation-timing-function: cubic-bezier(0.38, 0.17, 0.11, 0.85);
}




.ball-container {
  margin: 50px auto;
  width: 100px;
  height: 90px;
  position: relative;
}

.ball {
  width: 30px;
  height: 30px;
  position: absolute;
  left: calc(50% - 15px);
  bottom: 0;
  background: black;
  border-radius: 15px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.