html, body {
  height: 100%;
}

body {
  min-height: 100%;
  overflow: hidden;
  background: black;
}

.wrap {
  min-height: 100%;
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
}

.c {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

$total: 200;
$size: 10;
$r: 200;
$t: 1;
$vt: 20;
$z: 0;
$vz: 5;

@for $i from 1 through $total {
  $x: cos($t) * -$r;
  $y: sin($t) * $r;
  .c:nth-child(#{$i}){
    background: hsl($i * 1.1 + 2, 100%, 50%);
    width: $size+px;
    height: $size+px;
    animation: anim#{$i} 2s infinite steps(10) alternate;
    animation-delay: $i * -.003s;
  }

  @keyframes anim#{$i}{
    0% {
      transform: translate3d($x+px, $y+px, $z+px);
    }
    
    100% {
      transform: translate3d($x+px, $y+px, -$z+px);
    }
  }
  $t: $t + $vt;
  $z: $z + $vz;
}