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

Answer 2

您正在为元素的width 设置动画。文本的中心对齐仅在有额外空间时才明显。然而，一个非常简单的解决方法是将div 本身与margin: 0 auto; 居中。

@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>

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>

Answer 4

欢迎@user10294993！您可以添加两个关键帧：一个用于 de box，另一个用于文本。这是一个例子：

.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>

希望对你有帮助。