Nested DIV Circles (Animated)

Nested circles, animated with CSS to make a tunneling effect.

HTML

<div id="container">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div>
                            <div>
                              <div>
                                <div>
                                  <div>
                                    <div>
                                      <div>
                                        <div>
                                          <div>
                                            <div>
                                              <div>
                                                <div>
                                                  <div>
                                                    <div>
                                                      <div>
                                                        <div>
                                                          <div></div>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
  ...

CSS

@keyframes myOrbit1 {
  from {
    transform: rotate(0deg) translateX(10px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
}

@keyframes myOrbit2 {
  from {
    transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
  to {
    transform: rotate(0deg) translateX(10px) rotate(0deg);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

div#container {
  overflow: hidden;
}

div#container div {
  height: 100%;
  width: 100%;
  padding: 5%;
  border-radius: 100%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  background-color: rgba(0, 0, 255, 0.3);
}

div#container div.n0 {
  /**/
  background-color: rgba(0, 255, 0, 0.3);
  animation: myOrbit1 3s linear infinite;
}

div#container div.n1 {
  /**/
  background-color: rgba(0, 0, 255, 0.3);
  animation: myOrbit2 4s linear infinite;
}

div#container div:empty {
  background-color: rgba(255, 0, 0, 0.3);
}

div#container > div {
  height: 100vmin;
  width: 100vmin;
  overflow: hidden;
  margin: 0 auto;
}

div#container {
  width: 100%;
  height: 100%;
}

JavaScript

for (let [index, circle] of document.querySelectorAll('div#container div').entries())
  circle.classList.add('n' + (index % 2));