CSS 动画不起作用

Question

我制作了 2 个动画，第一个可以正常工作，而第二个则不能。尽管两者几乎相同，但它不起作用。我将不胜感激任何帮助！

#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: relative;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>

你现在可以明白我的意思了。第二个应该增加它的高度，然后穿过第一个，但事实并非如此。

Answer 1

您的两个元素都在其动画中使用了高度/宽度的百分比值，并且这些值将相对于它们的容器（包含块）（即主体）进行计算。

默认情况下，主体是块级元素，其宽度不取决于其内容，因此动画 div 上的百分比宽度可以正常工作，但因为主体的高度取决于其内容（所有元素都是这种情况）动画 div 上的百分比高度将不起作用并且失败auto。

^{更多细节在这里：https : //www.w3.org/TR/CSS21/visudet.html}

您必须明确指定身体的高度才能使动画正常工作。您可以尝试固定高度，您的元素将从 0 增长到此高度。

body {
  height:100px;
}
#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: relative;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>

您也可以height:100%在 body 上指定，但这也不起作用，因为相同的逻辑将应用于 body 及其html未指定高度的包含块 ( )，因此您还必须添加height:100%到html. 最后一个将起作用，因为包含块html是已知尺寸（高度/宽度）并且不依赖于内容的视口。

body,html {
  height:100%;
}
#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: relative;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>

为什么使用 position:absolute 有效？

因为添加position:absolute将使元素相对于第一个非静态父元素定位，并且由于没有定位父元素，它将相对于视口定位，并且percetange高度的行为与positon:absolute

指定百分比高度。该百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'

这是合乎逻辑的，因为position:absolute元素不会影响其包含块的高度，因为它已从流中删除。

现在视口的高度和宽度只是浏览器的高度/宽度，因此height:100%将是所有屏幕高度。

#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: absolute;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>

努力让你的身体position:relative。你的元素现在将相对于身体定位，你会看到动画也可以工作，但有一个奇怪的结果。

就像我之前说的，height:100%将引用包含块，在这种情况下，它body的高度和高度body被另一个元素填充，正好是 8px。

body {
  position:relative;
}

#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: absolute;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>