html { background:black; overflow:hidden; }

.container {
  position:relative;
  left:50%; top:50vh; 
}

.spitter {
  position:absolute;
  transform-origin:center top;
}

.colorSpitter {
  height:5em; 
  width:5em;
  border-radius:50%;
  opacity:.5;
  margin:0 auto;
  transform-origin:center top;
}


@for $i from 1 through 50 {
  .spitter:nth-of-type(#{$i}) {
     $color: ($i - 1) * 360/5;
     transform:rotate(#{$i *30}deg);
       .colorSpitter {
           background: hsla($color + ($i *            4), 100%, 50%, .6);
           -webkit-animation-delay: 5s; 
           animation-delay: 5s;
           animation:spit 2s infinite #{$i            *50}ms ease-in-out;
          -webkit-animation:spit 2s     
           infinite #{$i * 50}ms 
           ease-in-out;
     }
   }
}

@keyframes spit {
   0% { transform: perspective(15px);}
   50% { transform: perspective(10px);}
   100% { transform: perspective(5px)        rotateY(30deg); }
}