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

您正在为元素的 width 设置动画。文本居中对齐只有在有额外的 space 时才会明显。然而，一个非常简单的解决方法是将 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 2

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

希望这是您期待的结果。

JS Fiddle

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！您可以添加两个关键帧：一个用于盒子，另一个用于文本。这是一个例子：

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

希望对你有帮助。

CSS 带有宽度动画的文本对齐延迟

CSS text-align delay with width animation

html

css

css-animations

text-align