body,html {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #1d1e22;
}

.outer {
  position: relative;
  margin: auto;
  margin-top: 10%;
  width: 50%;
  padding-bottom: 50%;
  border: 5px solid #693;
  overflow: hidden;
}

.thing {
  width: 100%;
  padding-bottom: 100%;
  background-color: #1d1e22;
  border: 10px solid #693;
  position: absolute;
  border-radius: 50%;
}


$times: 18;
$duration: 3;

@for $i from 1 through $times {
  @keyframes move#{$i} {
    0% {transform: rotate(#{-$i*720/$times}deg) translateX(0%); z-index: 0;}
    @for $j from 1 through $times - 1 {
      #{100*$j/$times}% {z-index: $j}
    }
    100% {transform: rotate(#{-$i*720/$times}deg) translateX(150%); z-index: $times;}
  }

  .thing:nth-of-type(#{$i}) {
    animation: move#{$i} #{$duration}s -#{$duration*$i/$times}s linear infinite;
  }
}