<! DOCTYPE html> 
<html> 
  <head></head>
  <body>
    
    <div id="container">
    <div id="ball1" class="ball"></div>
    <div id="ball2" class="ball"></div>
    <div id="ball3" class="ball"></div>
    <div id="ball4" class="ball"></div>
    <div>
    
    
    
  </body>
</html> 
body {
  background-color:rgba(255, 249, 222, 1);
}

#container {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  
}
.ball {
  height:50px;
  width:50px;
  border-radius:100%;
  margin-left:20px;
  margin-top:10px;
  animation-name:ball-bounce;
  animation-iteration-count:infinite;
  animation-duration:2s;
  animation-timing-function:cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

#ball1 {
  background-color:rgba(197, 239, 247, 1);
  animation-delay:0.5s;
 }

#ball2 {
  background-color:rgba(241, 231, 254, 1);
  animation-delay:0.1s;
  
}

#ball3 {
  background-color:rgba(200, 247, 197, 1);
  animation-delay:0.3s;
  
  }

#ball4 {
  background-color:rgba(241, 169, 160, 1);  

}


  

@keyframes ball-bounce {
  0% { transform:translate(0px,0px);}
  
  25% {transform:translate(0px, 300px);}
  
  50%{ transform:translate(0,100px);}
  
  70% {transform:translate(0px,300px);}
  
  100% {transform:translate(0px,0px);}
  
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.