html
                   <div class="main">
     <span class="a" style="--i:27"></span>
     <span class="b" style="--i:27"></span>
     <span class="c" style="--i:27"></span>
     <span class="d" style="--i:27"></span>
     <span class="e" style="--i:27"></span> 
  </div>
 
            

        
css
                 
.main{
  positon:relative;
  display:flex;
  margin-top: 30px;
}

span{
  position:relative;
  width:10px;
  height:10px;
  background-color:black;
  border-radius:50%;
  margin:1px;
  animation:jump .5s linear infinite;
}
.a{animation:a 1s linear infinite;}
.b{animation:b 2s linear infinite;}
.c{animation:a 1s linear infinite;}
.d{animation:b 2s linear infinite;}
.e{animation:a 1s linear infinite;}

@keyframes    a{
0%{transform:translateY(0px)}
  50%{transform:translateY(-20px)}

  100%{transform:translateY(0px)}
 
}

@keyframes    b{
0%{transform:translateY(0px)}
  50%{transform:translateY(-20px)}

  100%{transform:translateY(0px)}
 
}
 
            

            
js