html { background-color:#181818; overflow:hidden; }

#wrapper {
  position: relative;
  top: 50px;
  left: 50%;
  margin-left:-50px;
  animation:slideit 2s infinite alternate ease-in-out;
}

.item {
  position:absolute;
  height:100px; width:100px;
  border:2px solid #f0d7b4;
  border-radius:50%;
  transform-origin:85% 50%;
  tannsform-origin:50% 50%;
}

@for $i from 1 through 8 {
  .item:nth-of-type(#{$i}) {
    transform:rotate(#{$i * 45}deg);
    animation:makeitwork 2s infinite alternate ease-in-out;
  }
}

@keyframes slideit {
  0% { margin-left:-50px; }
  35% { margin-left:-50px; } 
  65% { margin-left:-85px; }  
  100% { margin-left:-85px; }  
}

@keyframes makeitwork {
  0% { transform-origin:50% 50%; }
  35% { transform-origin:50% 50%; } 
  65% { transform-origin:85% 50%; }  
  100% { transform-origin:85% 50%; }
}