html - 具有宽度动画的 CSS 文本对齐延迟

Question

我正在尝试为我的文本设置动画，使其在页面加载时从左到右显示。这是通过简单地将 @keyframes 设置为从 0% max-width 过渡到 100% 来完成的。

但是我的文本对齐设置似乎只在动画完成后才应用。我只希望文本内容本身显示在我想要显示的位置，并假设我的代码是正确的。

我在这里遗漏了什么明显的东西吗？我是 CSS 的新手，但我的研究似乎并未表明动画或文本对齐的继承属性会导致此问题。下面的代码示例。谢谢!

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}

<div class="test_1">Why hello there</div>

Answer 1

您正在为 div 的 width 设置动画。所以内容会随着宽度的增加而显露出来。或者，您可以为伪选择器设置动画并显示文本。

希望这是您期望的结果。

JS Fiddle