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

我试图动画我的文本在页面加载时从左到右显示.只需将@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>
你正在设置div的宽度.因此,随着宽度的增加,内容将被显示出来.或者,您可以为伪选择器设置动画并显示文本.

希望这是你期待的结果.

JS Fiddle

本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院