<div id="particle-conatiner">
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
    </div>

@for $i from 1 through 30{
  @keyframes particle-animation-#{$i}{
  100%{
  transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
  }
} 
  
  .particle:nth-child(#{$i}){
    animation: particle-animation-#{$i} 60s infinite;
 $size: random(5) + 5 + px;
 height: $size;
 width: $size;
 opacity: random(100)/100;
 animation-delay: -$i *.2s;
 background: hsl(random(360), 70%, 50%);
 transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
  }
}

.particle{
 position: absolute;
 border-radius: 50%;
 animation: particle-animation 5s infinite;
 $size: random(5) + 5 + px;
 height: $size;
 width: $size;
 opacity: random(100)/100;
 animation-delay: .2s;
 background: hsl(random(360), 70%, 50%);
  
 transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
}