HTML, CSS and JavaScript playground

body {
  overflow:  hidden;
}

.content {
  width: 400px;
  height:  400px;
  margin:  10% auto;
  position:  relative;
}

.circle {
  margin:  auto;
  position:  absolute;
  xborder-radius:  50%;
  background:  #8A795D;
  width:  86%;
  height:  86%;
  top:  24px;
  left:  24px;
  box-shadow: 4px 4px 16px #000;
  animation-timing-function: linear;
  animation-name: rotation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

.second-circle {
  background: #fff;
}

.circle0 {
  xanimation-duration: 3s;
}

.circle1 {
  xanimation-duration: 6s;
}

.circle2 {
  xanimation-duration: 9s;
}

.circle3 {
  xanimation-duration: 12s;
}

.circle4 {
  xanimation-duration: 15s;
}

.circle5 {
  xanimation-duration: 18s;
}

.circle6 {
  xanimation-duration: 21s;
}

.circle7 {
  animation-duration: 24s;
}

.circle8 {
  xanimation-duration: 27s;
}

.circle9 {
 xanimation-duration: 30s;
}

.circle10 {
  xanimation-duration: 33s;
}

.circle11 {
  xanimation-duration: 36s;
}

.circle12 {
  background: orangered;
  xanimation-duration: 39s;
}

@keyframes rotation {
  from {
    transform: rotate(0deg) ;
  }                                        
  to {
    transform: rotate(359deg);
  }
}

Check out our Python playground!