*{
  padding: 0px;
  margin: 0px;
}

.ball {
  width: 100px;
  height: 100px;
  background: #101010;
  margin: 50px auto;
  border-radius: 50%;

  animation-duration:  10s;
  animation-delay: 0s;
  animation-name: fall;
  /* animation-timing-function: cubic-bezier(.5,0.05,1,.5); */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes fall {
  0% {
    margin-top: 50px;
  }

  10% {
    margin-top: 500px;
  }

  20% {
    margin-top: 300px
  }

  30% {
    margin-top: 150px
  }

  40% {
    margin-top: 250px
  }

  50% {
    margin-top: 50px

  }

  60% {
    margin-top: 0px
  }
  70% {
    margin-top: 80px
  }

  80% {
    margin-top: 20px

  }

  90% {
    margin-top: 150px
  }

  100% {
    margin-top: 50px
  }
}