<div class="wrapper">
  <div class="ball"></div>
  <div class="grand"></div>
</div>

@keyframes animation{
  0%{
    transform: translateY(0px);
  }
  
  10%{
    transform: translateY(-400px);
  }
  
  20%{
    transform: translateY(0px);
  }
  
  30%{
    transform: translateY(-200px);
  }
  
  40%{
    transform: translateY(0px);
  }
  
  50%{
    transform: translateY(-100px);
  }
  
  60%{
    transform: translateY(0px);
  }
  
  70%{
    transform: translateY(-50px);
  }
  
  80%{
    transform: translateY(0px);
  }
  
  90%{
    transform: translateY(-25px);
  }
  
  100%{
    transform: translateY(0px);
  }
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ball {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

.grand {
  width: 100%;
  height: 5px;
  background-color: black;
}