<style>
body {
  background:lightgrey;
}
.main {
   width: 332px;
   margin: 10% auto;
   padding: 15px 15px;
   box-sizing: border-box;
}
ul
{
  list-style-type:none;
  padding:0;
  margin:0;
  display:inline-block;
  position:relative;
  height:300px;
  width:300px;
}

li
{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  animation:run 4s linear infinite;
  border-radius:50%;
}
li:nth-child(1){
  height:50px;
  width:50px;
  background-color:#398C00;
  z-index:6;
}
li:nth-child(2){
  height:100px;
  width:100px;
  background-color:#0F9C0B;
  z-index:5;
}
li:nth-child(3){
  height:150px;
  width:150px;
  background-color:#3DA831;
  z-index:4;
}
li:nth-child(4){
  height:200px;
  width:200px;
  background-color:#5ACC57;
  z-index:3;
}
li:nth-child(5){
  height:250px;
  width:250px;
  background-color:#71FF6D;
  z-index:2;
}
li:nth-child(6){
  height:300px;
  width:300px;
  background-color:#D8FFD7;
}
@keyframes run{
 0%{
    box-shadow:0px 0px 0px rgba(0,0,0,0.5);
  }
  20%{
    box-shadow:0px 15px 1px rgba(0,0,0,0.5);
  }
  30%{
    box-shadow:0px 0px 0px rgba(0,0,0,0.5);
  }
  40%{
    box-shadow:15px 0px 1px rgba(0,0,0,0.5);
  }
  50%{
    box-shadow:0px 0px 0px rgba(0,0,0,0.5);
  }
  60%{
    box-shadow:0px -15px 1px rgba(0,0,0,0.5);
  }
  70%{
    box-shadow:0px 0px 0px rgba(0,0,0,0.5);
  }
   80%{
    box-shadow:-15px 0px 1px rgba(0,0,0,0.5);
  }
  90%, 100%{
    box-shadow:0px 0px 0px rgba(0,0,0,0.5);
  }
}

</style>

<div class="main">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>