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>

- J Lou

Answer 1

你正在为div的宽度制作动画。因此，随着宽度的增加，内容将被显示出来。或者，你可以制作伪选择器动画并显示文本。

希望这是你期望的结果。 JS Fiddle

- Allan Jebaraj

---

啊，这正是我想要的，谢谢！为了确保我理解你和@serg关于width和text-align在动画中如何交互的内容 - 我可以这样说吗？text-align在每个动画帧检查<div>的大小吗？一旦它扩展到足够宽以超出文本之外的额外空间，它就会滑动文本以使其居中？ - J Lou

是的。一开始容器的宽度会小于文本的宽度。随着动画的进行，容器逐渐增加宽度，最终比文本更宽。然后文本就开始居中显示。 - Allan Jebaraj

Answer 2

您正在为元素的宽度添加动画效果。只有在有额外空间时，文本的居中对齐才会显现出来。但是，一个非常简单的解决方法是使用 margin: 0 auto; 居中对齐 div 本身。

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

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

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

- Serg Chernata

---

谢谢，我其实自己发现了。但是我想让它从左到右逐渐显示，从“W”开始，所以我不认为在这种情况下可以使用margin。 - J Lou

Answer 3

您可以考虑使用嵌套元素，应用相同的宽度，然后依靠溢出来隐藏它并保持文本不变：

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

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

.test_1>span {
  display: inline-block;
  white-space: nowrap;
  width: inherit;
}

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

- Temani Afif

Answer 4

欢迎 @user10294993！您可以添加两个关键帧来完成：一个用于盒子，另一个用于文本。这里是一个示例：

.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 infinite;
}

.test_1 p {
  margin: 0;
  animation: display 1s infinite;
} 

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

@keyframes display{
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}

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

希望它能对你有所帮助。

- Nacorga