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，这样您就可以只设置动画 width/height，而 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 中，您提供了顶部和左侧的 50% 并进行了平移 (-50%,-50%)，这使得 div居中对齐

但是当 class 被移除时，顶部和左侧的位置值为 0% 并且翻译设置回默认值，因此 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>

CSS 变换动画未按预期工作

CSS transform animation not working as expected

css

css-transitions

css-animations

下面是相同