<div class="ball" id="ball_1"></div>
<div class="ball" id="ball_2"></div>
<div class="ball" id="ball_3"></div>
<div class="ball" id="ball_4"></div>
.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation-name: ballMovement;
    animation-iteration-count: infinite;
  }
  
#ball_1 {
  background-color: red;
  position: absolute;
  top: 10px;
  left: 17%;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#ball_2 {
  background-color: green;
  position: absolute;
  top: 10px;
  left: 37%;
  animation-duration: 2s;
  animation-timing-function: ease;
}

#ball_3 {
  background-color: blue;
  position: absolute;
  top: 10px;
  left: 57%;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

#ball_4 {
  background-color: purple;
  position: absolute;
  top: 10px;
  left: 77%;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.