CSS transform animation not working as expected

Question

I'm trying to create a loading animation, which at first the logo is inside a rectangle in the center of the page, then the rectangle expands to the dimensions of the page, and the logo goes up to the corner (and on mobile: to the center) as the rectangle expands.

The problem is that when animation occurs, unexpectedly the rectangle does not expand evenly in all directions alike. I've created this JSFiddle that shows the problem. Notice how the expansion on the right and bottom sides is slower than the expansion on the left and top sides.

Does anyone know why this is happening and how to correct this?

Also here is my CSS and HTML for reference:

CSS:

:root {
  --main: #007;
  --bright: #fdc;
}

@media (max-width: 1024px) {
  #logo a {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main);
}

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0%;
  left: 0%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease;
}

#logo.loading div {
  width: 172px;
  height: 72px;
  top: 50%;
  left: 50%;
  border-width: 0px;
  transform: translate(-50%, -50%);
}

#logo a {
  display: inline-grid;
  fill: var(--main);
}

#logo svg {
  width: 140px;
  height: 40px;
  margin: 16px;
}

#logo {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

HTML (and JS):

<div id="logo" class="loading">
  <div>
    <a href="https://example.com">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 40" style="enable-background:new 0 0 140 40;" xml:space="preserve">
        <!-- THE LOGO SVG -->
      </svg>
    </a>
  </div>
</div>

<script>
  window.onload = function() {
    var logo = document.getElementById("logo");
    setTimeout(function() {
      logo.classList.remove("loading");
    }, 500);
  }
</script>

Answer 1

The reason for not expanding at same speed from all side is because in #logo .loading div you have provided top and left 50% and translate(-50%,-50%) which makes a div align center

But when the class is removed then the top and left position value is 0% and translate is set back to default due to which the div is positioning itself(at the top left corner) as well expanding giving an impression that top and left is expanding faster than bottom and right

Just replace this

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0%;
  left: 0%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease; 
}

with this

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease;
  transform: translate(-50%, -50%); 
}

Below is the output for the same

window.onload = function() {
  var logo = document.getElementById("logo");
  setTimeout(function() {
    logo.classList.remove("loading");
  }, 500);
}

:root {
  --main: #007;
  --bright: #fdc;
}

@media (max-width: 1024px) {
  #logo a {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main);
}

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease;
  transform: translate(-50%, -50%);
}

#logo.loading div {
  width: 172px;
  height: 72px;
  top: 50%;
  left: 50%;
  border-width: 0px;
  transform: translate(-50%, -50%);
}

#logo a {
  display: inline-grid;
  fill: var(--main);
}

#logo svg {
  width: 140px;
  height: 40px;
  margin: 16px;
}

#logo {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

<div id="logo" class="loading">
  <div>
    <a href="https://example.com">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 40" style="enable-background:new 0 0 140 40;" xml:space="preserve">
        <g>
          <path d="M28.7,30.8v6.4H8V2.8h8v28H28.7z"/>
          <path d="M65.6,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C65.2,15.2,65.6,17.5,65.6,20z M57.4,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2C50.7,9.3,49.3,9,47.8,9c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   s-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C57.2,23.2,57.4,21.7,57.4,20z"/>
          <path d="M86.8,19.4H99v14.5c-1.8,1.3-3.6,2.2-5.6,2.8c-2,0.6-4.1,0.9-6.2,0.9c-2.8,0-5.4-0.4-7.7-1.3c-2.3-0.9-4.3-2.1-5.9-3.7
                   c-1.6-1.6-2.9-3.4-3.8-5.6c-0.9-2.1-1.3-4.5-1.3-7c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.6-5.5c1.6-1.6,3.5-2.8,5.7-3.6
                   c2.2-0.9,4.7-1.3,7.5-1.3c1.4,0,2.8,0.1,4,0.4c1.3,0.2,2.4,0.6,3.5,1s2,0.9,2.9,1.5c0.9,0.6,1.7,1.2,2.4,1.8l-2.3,3.5
                   c-0.4,0.5-0.8,0.9-1.4,1s-1.2,0-1.9-0.4c-0.6-0.4-1.2-0.7-1.8-1c-0.6-0.3-1.1-0.5-1.7-0.7c-0.6-0.2-1.2-0.3-1.8-0.4
                   C87.7,9.1,86.9,9,86.1,9c-1.5,0-2.8,0.3-4,0.8c-1.2,0.5-2.2,1.3-3.1,2.2c-0.8,1-1.5,2.1-1.9,3.5c-0.5,1.3-0.7,2.8-0.7,4.5
                   c0,1.8,0.3,3.4,0.8,4.9c0.5,1.4,1.2,2.6,2.1,3.6c0.9,1,2,1.7,3.3,2.2c1.3,0.5,2.7,0.8,4.3,0.8c1,0,1.8-0.1,2.6-0.3
                   c0.8-0.2,1.5-0.4,2.3-0.8v-5.2h-3.4c-0.5,0-0.9-0.1-1.2-0.4c-0.3-0.3-0.4-0.6-0.4-1V19.4z"/>
          <path d="M138,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C137.6,15.2,138,17.5,138,20z M129.8,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2c-1.2-0.5-2.6-0.8-4.1-0.8c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   c-0.4,1.4-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C129.6,23.2,129.8,21.7,129.8,20z"/>
        </g>
      </svg>
    </a>
  </div>
</div>

Answer 2

That animation messes up a bit due to both width and the translate animating at the same time. Since you were tranlating it by 50% width and 50% height, that means that those values change more rapidly than they should since both those values are also changing.

My suggestion for fixing this is to use flexbox to center the logo div, so that you can animate only width/height, while flex takes care of the location.

window.onload = function() {
  var logo = document.getElementById("logo");
  setTimeout(function() {
    logo.classList.remove("loading");
  }, 500);
}

:root {
  --main: #007;
  --bright: #fdc;
}

@media (max-width: 1024px) {
  #logo a {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main);
}

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease;
}

#logo.loading div {
  width: 172px;
  height: 72px;
  border-width: 0px;
}

#logo a {
  display: inline-grid;
  fill: var(--main);
}

#logo svg {
  width: 140px;
  height: 40px;
  margin: 16px;
}

#logo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="logo" class="loading">
  <div>
    <a href="https://example.com">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 40" style="enable-background:new 0 0 140 40;" xml:space="preserve">
        <g>
          <path d="M28.7,30.8v6.4H8V2.8h8v28H28.7z"/>
          <path d="M65.6,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C65.2,15.2,65.6,17.5,65.6,20z M57.4,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2C50.7,9.3,49.3,9,47.8,9c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   s-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C57.2,23.2,57.4,21.7,57.4,20z"/>
          <path d="M86.8,19.4H99v14.5c-1.8,1.3-3.6,2.2-5.6,2.8c-2,0.6-4.1,0.9-6.2,0.9c-2.8,0-5.4-0.4-7.7-1.3c-2.3-0.9-4.3-2.1-5.9-3.7
                   c-1.6-1.6-2.9-3.4-3.8-5.6c-0.9-2.1-1.3-4.5-1.3-7c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.6-5.5c1.6-1.6,3.5-2.8,5.7-3.6
                   c2.2-0.9,4.7-1.3,7.5-1.3c1.4,0,2.8,0.1,4,0.4c1.3,0.2,2.4,0.6,3.5,1s2,0.9,2.9,1.5c0.9,0.6,1.7,1.2,2.4,1.8l-2.3,3.5
                   c-0.4,0.5-0.8,0.9-1.4,1s-1.2,0-1.9-0.4c-0.6-0.4-1.2-0.7-1.8-1c-0.6-0.3-1.1-0.5-1.7-0.7c-0.6-0.2-1.2-0.3-1.8-0.4
                   C87.7,9.1,86.9,9,86.1,9c-1.5,0-2.8,0.3-4,0.8c-1.2,0.5-2.2,1.3-3.1,2.2c-0.8,1-1.5,2.1-1.9,3.5c-0.5,1.3-0.7,2.8-0.7,4.5
                   c0,1.8,0.3,3.4,0.8,4.9c0.5,1.4,1.2,2.6,2.1,3.6c0.9,1,2,1.7,3.3,2.2c1.3,0.5,2.7,0.8,4.3,0.8c1,0,1.8-0.1,2.6-0.3
                   c0.8-0.2,1.5-0.4,2.3-0.8v-5.2h-3.4c-0.5,0-0.9-0.1-1.2-0.4c-0.3-0.3-0.4-0.6-0.4-1V19.4z"/>
          <path d="M138,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C137.6,15.2,138,17.5,138,20z M129.8,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2c-1.2-0.5-2.6-0.8-4.1-0.8c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   c-0.4,1.4-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C129.6,23.2,129.8,21.7,129.8,20z"/>
        </g>
      </svg>
    </a>
  </div>
</div>