html {
  overflow: hidden;
}

.assembly {
  animation: rot-global 3s linear infinite;
}
.assembly, .assembly *, .assembly:before, .assembly :before, .assembly :after {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}
.assembly:before {
  z-index: -1;
  border: solid .125em;
  margin: -8em;
  width: 16em;
  height: 16em;
  opacity: .001;
  animation: inherit;
  animation-name: fade-global;
  content: '';
}

.circle {
  background: black;
}
.circle:nth-child(1) {
  transform: rotate(0deg) translateY(6.9282em);
  animation: rot-circles1 3s linear infinite;
}
.circle:nth-child(1) .dot:first-child {
  animation-name: dot-pos-a1;
}
.circle:nth-child(1) .dot:last-child {
  animation-name: dot-pos-a2;
}
@keyframes rot-circles1 {
  0%, 33.334% {
    transform: rotate(0deg) translateY(6.9282em);
  }
  66.666%, 100% {
    transform: rotate(0deg) translateY(6.9282em) rotate(180deg);
  }
  66.667% {
    transform: rotate(90deg) translateY(4.0em);
  }
  100% {
    transform: rotate(90deg) translateY(4.0em) rotate(180deg);
  }
}
.circle:nth-child(2) {
  transform: rotate(120deg) translateY(6.9282em);
  animation: rot-circles2 3s linear infinite;
}
.circle:nth-child(2) .dot:first-child {
  animation-name: dot-pos-a1;
}
.circle:nth-child(2) .dot:last-child {
  animation-name: dot-pos-a2;
}
@keyframes rot-circles2 {
  0%, 33.334% {
    transform: rotate(120deg) translateY(6.9282em);
  }
  66.666%, 100% {
    transform: rotate(120deg) translateY(6.9282em) rotate(180deg);
  }
  66.667% {
    transform: rotate(-90deg) translateY(4.0em);
  }
  100% {
    transform: rotate(-90deg) translateY(4.0em) rotate(180deg);
  }
}
.circle:nth-child(3) {
  transform: rotate(240deg) translateY(6.9282em);
  animation: rot-circles3 3s linear infinite;
}
.circle:nth-child(3) .dot:first-child {
  animation-name: dot-pos-b1;
}
.circle:nth-child(3) .dot:last-child {
  animation-name: dot-pos-b2;
}
@keyframes rot-circles3 {
  0%, 33.334% {
    transform: rotate(240deg) translateY(6.9282em);
  }
  66.666%, 100% {
    transform: rotate(240deg) translateY(6.9282em) rotate(180deg);
  }
  66.667% {
    transform: none;
  }
  100% {
    transform: rotate(180deg);
  }
}
.circle:before, .circle:after {
  z-index: -1;
  border: solid .125em;
  opacity: .001;
  animation: inherit;
  content: '';
}
.circle:before {
  margin: -4em;
  width: 8em;
  height: 8em;
  animation-name: fade-2;
}
.circle:after {
  margin: -6.9282em;
  width: 13.85641em;
  height: 13.85641em;
  animation-name: fade-3;
}
.circle:last-child:after {
  margin: -8em;
  width: 16em;
  height: 16em;
}

.dot {
  margin: -1em;
  width: 2em;
  height: 2em;
  box-shadow: 0 0 .125em;
  background: inherit;
  animation: inherit;
}
.dot:first-child {
  transform: translate(4em);
}
.dot:last-child {
  transform: translate(-4em);
}

@keyframes rot-global {
  0%, 33.334%, 100% {
    transform: rotate(0deg);
  }
  33.333% {
    transform: rotate(60deg);
  }
}
@keyframes dot-pos-a1 {
  0%, 66.666% {
    transform: translate(4em);
  }
  66.667%, 100% {
    transform: translate(6.9282em);
  }
}
@keyframes dot-pos-a2 {
  0%, 66.666% {
    transform: translate(-4em);
  }
  66.667%, 100% {
    transform: translate(-6.9282em);
  }
}
@keyframes dot-pos-b1 {
  0%, 66.666% {
    transform: translate(4em);
  }
  66.667%, 100% {
    transform: translate(8em);
  }
}
@keyframes dot-pos-b2 {
  0%, 66.666% {
    transform: translate(-4em);
  }
  66.667%, 100% {
    transform: translate(-8em);
  }
}
@keyframes fade-global {
  0%, 33.334%, 100% {
    opacity: .001;
  }
  16.667% {
    opacity: .999;
  }
}
@keyframes fade-2 {
  0%, 33.334%, 66.667%, 100% {
    opacity: .001;
  }
  50% {
    opacity: .999;
  }
}
@keyframes fade-3 {
  0%, 66.666%, 100% {
    opacity: .001;
  }
  83.333% {
    opacity: .999;
  }
}