<div class="ball" id="ball_1"></div>
<div class="ball" id="ball_2"></div>
<div class="ball" id="ball_3"></div>

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation-name: ballMovement;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

#ball_1 {
  background-color: red;
  position: absolute;
  top: 10px;
  left: 27%;
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
}

#ball_2 {
  background-color: green;
  position: absolute;
  top: 10px;
  left: 47%;
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
}

#ball_3 {
  background-color: blue;
  position: absolute;
  top: 10px;
  left: 67%;
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
}

@keyframes ballMovement {
  0% {
    top: 10px;
  }
  100% {
    top: 350px;
  }
}