.anim-container {
    position: absolute;
    width: 100%;
    min-height: 100%;
    transform-style: preserve-3d;
}

.blast-cast {
    position: absolute;
    background: black;
    opacity: .7;
    border-radius: 50%;
}

@for $i from 1 through 100 {
    @keyframes blast-cast-#{$i} {
      100% {
        transform: translate3d(-3em +random(200)/200, 0, 0);
      }
    }
}

@for $i from 1 through 100 {
  .blast-cast:nth-child(#{$i}){
     $size: random(30)+px;
     height: $size;
     width: $size;
     transform: translate3d( (random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
     background: #15f4ee;
     animation: blast-cast-#{$i} 0.7s;
  }
}

.blast-hit {
    position: absolute;
    background: black;
    opacity: .7;
    border-radius: 50%;
}

@for $i from 1 through 100 {
    @keyframes blast-hit-#{$i} {
      100% {
            transform: translate3d((random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
      }
    }
}

@for $i from 1 through 100 {
    .blast-hit:nth-child(#{$i}){
        $size: random(30)+px;
        height: $size;
        width: $size;
        transform: translate3d(-3em +random(200)/200, 0, 0);
        animation: blast-hit-#{$i} 0.7s infinite;
        background: #15f4ee;
     }
}