CSS 文本对齐延迟与宽度动画

2024-04-24

我正在尝试将文本设置为动画,使其在页面加载时从左到右显示。这只需简单地设置即可完成@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>

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

希望这是您所期待的结果。

JSFiddle https://jsfiddle.net/muwLyv7k/31/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 文本对齐延迟与宽度动画 的相关文章