$d: .5em;
$n: 255;

.center {
  position: absolute;
  top: 45%;
  left: 45%;
  -webkit-animation: brot 60s linear infinite;
  -moz-animation: brot 60s linear infinite;
  animation: brot 60s linear infinite;   
}

.color {
  position: absolute;
  top: $d;
  left: $d;
  margin: -$d/2;
  border-radius: 100%;
  width: $d*2;
  height: $d;
  background: rgba(0, 0, 0, 1);
  -webkit-animation: rot 10s ease infinite;
  -moz-animation: rot 10s ease infinite;
  animation: rot 10s ease infinite;    
  
  @for $i from 0 to $n {
    $r : $d - $i*($d/6);
    $x : $r*cos($i);
    $y : $r*sin($i);
      
    &:nth-child(#{$i + 1}) {
      top: $y;
      left: $x;   
      transform: rotate($i * 10deg);
    }
  }
}

@-webkit-keyframes brot { to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes brot { to { -moz-transform: rotate(360deg); } }
@keyframes brot { to { transform: rotate(360deg); } }

@-webkit-keyframes rot { 50% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes rot { 50% { -moz-transform: rotate(-360deg); } }
@keyframes rot { 50% { transform: rotate(-360deg); } }