<div class="wrapper">
  <div class="ball-wrapper">
    <div class="ball red"></div>
    <div class="ball blue"></div>
    <div class="ball green"></div>
  </div>
  <div class="grand"></div>
</div>

@keyframes animation{
  0%{
    transform: translateY(0px);
  }
  
  10%{
    transform: translateY(-400px);
  }
  
  20%{
    transform: translateY(30px) scale(1,0.6);
  }
  
  30%{
    transform: translateY(-200px);
  }
  
  40%{
    transform: translateY(20px) scale(1,0.7);
  }
  
  50%{
    transform: translateY(-100px);
  }
  
  60%{
    transform: translateY(10px) scale(1,0.8);
  }
  
  70%{
    transform: translateY(-50px);
  }
  
  80%{
    transform: translateY(5px) scale(1,0.9);
  }
  
  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-wrapper {
  display: flex;
  gap: 4px;
}

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

.red {
  background-color: red;
}

.blue {
  background-color: blue;
  animation-delay: 0.5s;
}
.green {
  background-color: green;
  animation-delay: 1s;
}

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