CSS 变换动画未按预期工作

Question

我正在尝试创建一个加载动画，首先徽标位于页面中心的矩形内，然后矩形扩展到页面的尺寸，徽标上升到角落（并且在移动设备上：到中心）随着矩形的展开。

问题是当动画发生时，矩形并没有在所有方向上均匀地展开。我创建了 this JSFiddle 来显示问题。请注意右侧和底部的扩展比左侧和顶部的扩展慢。

有谁知道为什么会发生这种情况以及如何纠正这种情况？

这里还有我的 CSS 和 HTML 供参考：

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（和 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

由于宽度和平移动画同时进行，该动画有点混乱。由于您将其平移了 50% 的宽度和 50% 的高度，这意味着这些值的变化比应有的更快，因为这两个值也在变化。

我对解决此问题的建议是使用 flexbox 将徽标 div 居中，这样您就可以只为宽度/高度设置动画，而 flex 负责处理位置。

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>

Answer 2

没有以相同速度从各个方向扩展的原因是因为在#logo .loading div 中，您提供了 top 和 left 50% 和 translate(-50%,-50%) 这使得 div 居中对齐

但是当类被删除时，顶部和左侧的位置值为 0%，并且 translate 设置回默认值，因为 div 将自身定位（在左上角）以及扩展给人的印象是顶部和左边比底部和右边扩展得更快

替换这个

#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 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%); 
}

下面是相同的输出

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>