CSS文字对齐延迟与宽度动画 [英] CSS text-align delay with width animation

问题描述

我正在尝试使文本动画，使其在页面加载时从左到右显示。只需将 @keyframes 设置为从0％最大宽度过渡到100％即可。

I am trying to animate my text to appear from left to right on page load. This is done by simply setting @keyframes to transition from 0% max-width to 100%.

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

However my text-align settings seem to be applied only after the animation is complete. I just want the text content itself to reveal itself where I intend it to be, and assumed my code is correct.

我在这里遗漏了一些明显的东西吗？我对 CSS 还是很陌生，但我的研究似乎并未表明应引起动画或文本对齐的继承属性。下面的代码示例。谢谢！

Am I missing something obvious here? I'm fairly new to CSS, but my research doesn't seem to indicate there are inherit properties of animation or text-align that should cause this. Code example below. Thanks!

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

推荐答案

您正在为div的宽度设置动画。因此，内容将随着宽度的增加而显示出来。另外，您可以为伪选择器设置动画并显示文本。

You're animating the width of the div. So the content will be revealed as the width increases. Alternatively, you could animate pseudo-selectors and reveal the text.

希望这是您期望的结果。

Hope this is the result you're expecting.

JS小提琴

这篇关于CSS文字对齐延迟与宽度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！