title: Why does a rotation animation influence the position of a container?
body: <p>I tried to make a spinning circle loading icon on my webpage like so: </p>
  
  <p>CSS:</p>
  
  <pre><code>@keyframes spin {
      0% {transform: rotate(0deg); }
      100% {transform: rotate(360deg); }
  }
  
  div#spinningCircleBox {
      width: 6.25vw;
      height: 6.25vw;
      position: fixed;
      background-color: rgba(255, 255, 255, 0);
      left: 50vw;
      top: 50vh;
      transform: translateX(-50%) translateY(-50%);
      box-sizing: border-box;
      animation: spin 1s infinite linear;
      border: solid 1px red;
  }
  
  div#circleBlockMask {
      width: 3.125vw;
      height: 3.125vw;
      position: fixed;
      box-sizing: border-box;
      left: 0;
      top: 0;
      overflow: hidden;
  }
  
  div#spinningCircle {
      width: 6.25vw;
      height: 6.25vw;
      position: relative;
      border: solid 8px aliceblue;
      background-color: rgba(255, 255, 255, 0);
      border-radius: 10vw;
      box-sizing: border-box;
      left: 0;
      top: 0;
  }
  
  div#circleWrapper {
      width: 6.5vw;
      height: 6.5vw;
      box-sizing: border-box;
      border: solid 12px white;
      border-radius: 10vw;
      left: 50vw;
      top: 50vh; 
      position: fixed;
      transform: translateX(-50%) translateY(-50%);
      border: solid 1px yellow;
  
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;body&gt;
  [...]
  &lt;div id="spinningCircleBox"&gt;
          &lt;!--div id="circleBlockMask"&gt;
              &lt;div id="spinningCircle"&gt;&lt;/div&gt;
          &lt;/div--&gt;
      &lt;/div&gt;
  &lt;div id="circleWrapper"&gt;&lt;/div&gt;
  [...]
  &lt;/body&gt;
  </code></pre>
  
  <p>But what happens is that the animation works but "moves" the 'spinningCircleBox' away. I attached a screenshot: </p>
  
  <p><a href="https://i.stack.imgur.com/zSgfs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSgfs.png" alt="Screenshot of webpage"></a></p>
  
  <p>You can see that the yellow box (I called it "circleWrapper", it's just there to show the difference) is aligned correctly in the middle, centered vertically and horizontally.<br>
  If I disable the spin-animation of the spinningCircleBox, it is also aligned correctly, but for some reason (and that is my question), with the animation enabled, the container ("spinningCircleBox") is not placed in the middle. </p>
  
  <p>Could you help me out? </p>