<div class="wrapper">
  
  <div class="circle1"></div>
    
  <div class="circle2"></div>
  <div class="circle3"></div>
    <div class="shadow">
         <div class="circle1-shadow"></div>
       <div class="circle1-shadow"></div>
       <div class="circle1-shadow"></div>
   </div>
    
</div>
body {
  position:absolute; 
  width:100%;
  height:100%;
}
.wrapper {
  
  display:flex;
  flex-direction:row;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;
  position:relative;
}
.circle1,
.circle2,
.circle3 {
  width:100px;
  height:100px;
  border-radius:50%;
  margin-left:20px;
  
}
.circle1 {
  background:#40ded3;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animaton-delay:.25s;
  -webkit-animation-delay:.25s;
  
}
.circle2 {
  background:#40de8f;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animaton-delay:.35s;
  -webkit-animation-delay:.35s;
  
  
}
.circle3 {
  background:#b7de40;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
   animaton-delay:.45s;
  -webkit-animation-delay:.45s;
}
/* .shadow {
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:50px;
  width:100%;
  align-items:bottom;
}
.circle1-shadow {
  background:#f8f8f8;
  width:25px;
  height:1px;
  box-shadow:3px 3px 23px 5px #000;
  margin-left:50px;
} */

@keyframes move-circle {
 0%   { transform: scale(1,1)    translateY(0); 
  }
 10%  { transform: scale(1.2, .9)
 translateY(10px);
  }
  30% { transform: scale(.9, 1.2)
  translateY(-100px)
  }
  50% { transform: scale(1.2,.9)
  translateY(0)
  }
  57% {transform: scale(1.1,.9)
  translateY(-7px);
  }
  75% {transform: scale(1,1)
  translateY(0)
  }
  100% {transform: scale(1,1)
  translateY(0)
  }
  

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.