.container
    - (1..50).each do |i|
        .dot

$totalDots: 50;
$multiplier: 250;
body { 
    background: black;
    transform: translate3d(0, 0, 0); 
}

.container {
    padding: $multiplier+px;
    width: 0;
    height: 0;
    margin: 10% auto 0;
}

$dotSize: ($multiplier / 10)+px;
.dot {
    position: absolute;
    border-radius: 50%;
    width: $dotSize;
    height: $dotSize;
    background-color: #fff;
    box-shadow: 0 0 15px 0 #fff;
}

@for $i from 1 through $totalDots {
    .dot:nth-child(#{$i}) {
        animation: explode#{$i} 600ms ($i * 10)+ms ease-out alternate infinite;
    }
    
    @keyframes explode#{$i} {
        $angle: ($i / $totalDots) * 360;
        from {
            transform: translate3d(0, 0, 0) scale(0);
            box-shadow: 0 0 15px 0 #0000ef;
            background-color: #0000ef;
            opacity: 1;
        }

        to {
            $x: floor(cos($angle) * $multiplier);
            $y: floor(sin($angle) * $multiplier);
            transform: translate3d($x+px, $y+px, 0) scale(2);
            opacity: .5;
        }
    }
}