Fading Orbs

by ZEZEME

HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="div1">
      <div id="rock1"></div>
      <div id="rock2"></div>
      <div id="rock3"></div>
      <div id="rock4"></div>
      <div id="rock5"></div>
      <div id="rock6"></div>
      <div id="rock7"></div>
      <div id="rock8"></div>
    </div>
    </body>
  </html>

CSS

body {
    background-color: #181818;
}
#rock1{
  position:absolute;
  left:-30px;
  top:0px;
  width:40px;
  height:40px;
  transform: rotate(360deg);
  border-radius: 50%;
  animation:b 6s infinite;
}
#rock2{
  position:absolute;
  left:200px;
  top:-25px;
  width:40px;
  height:40px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:a 6s infinite;
}
#rock3{
  position:absolute;
  left:585px;
  top:5px;
  width:40px;
  height:40px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:a 6s infinite;
}
#rock4{
  position:absolute;
  left:385px;
  top:90px;
  width:40px;
  height:40px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:b 6s infinite;
}
#rock5{
  position:absolute;
  left:60px;
  top:140px;
  width:25px;
  height:25px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:a 6s infinite;
}
#rock6{
  position:absolute;
  left:500px;
  top:-25px;
  width:25px;
  height:25px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:a 6s infinite;
}
#rock7{
  position:absolute;
  left:60px;
  top:-55px;
  width:25px;
  height:25px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:b 6s infinite;
}
#rock8{
  position:absolute;
  left:530px;
  top:130px;
  width:25px;
  height:25px;
  transform:rotate(360deg);
  border-radius: 50%;
  animation:b 6s infinite;
}
@keyframes a{
  0%{
    background:transparent;
  }
  50%{
    background:white;
  }
  100%{
    background:transparent;
  }
}
@keyframes b{
  0%{
    background:white;
  }
  50%{
    background:transparent;
  }
  100%{
    background:white;
  }
}
#div1{
  position:absolute;
  left:calc(50% - 300px);
  top:calc(50% - 150px);
  width:600px;
  height:100px;
  border-radius:100px;
}