html - 如何使用 CSS 使我的文本动画按特定顺序运行并在页面中间开始？

Question

1. 当文本动画开始时，我怎样才能让文本动画按照下面列出的顺序运行，这与第一行、第三行和第二行不同？例如，我希望每一行都按下面的顺序显示。

   • 欢迎来到我的数字投资组合
   • 我叫利亚姆·多切蒂
   • 我是一名来自伦敦的前端网络开发人员。

2. 如何让文本动画从页面中间开始，而不是从左侧滑过？

JSFIDDLE

<!-- Intro Section -->
  <section id="intro" class="intro-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <p class="main1">Welcome To My Digital Portfolio</p>
          <p>My name is Liam Docherty</p>
          <p>I'm a front-end web developer from London.</p>
        </div>
      </div>
    </div>
  </section>

Answer 1

因为看起来简单的 text-align: center 不会在不弄乱动画的情况下使文本居中，所以您可以为文本设置一个明确的宽度(无论宽度是多少使用此字体/大小组合)，然后使用 auto 左右边距使其居中。

然后，给每个句子一个单独的动画，该动画的 animation-delay 等于它之前每个动画的总长度。在我下面使用的 animation 速记中，第二个数字是延迟。第一个数字(在每种情况下都是 4s)是 animation-duration。

每个动画都会将文本设置为从 0 宽度到其实际的最终宽度。

但由于这种方法的默认样式为 0 宽度，因此设置 forwards 的 animation-fill-mode 以确保文本在完成后不会消失动画。

<p class="main1">Welcome To My Digital Portfolio</p>
<p class="main2">My name is Liam Docherty</p>
<p class="main3">I'm a front-end web developer from London.</p>

p {
 color: white;
 font-family: "Helvetica";
 font-size: 1.3em;
 margin: 10px auto;
 white-space: nowrap;
 overflow: hidden;
 width: 0px
}
.main1 {
  animation: type 4s 0s forwards steps(60, end);
}
.main2 {
  animation: type2 4s 4s forwards steps(60, end);
}
.main3 {
  animation: type3 4s 8s forwards steps(60, end);
}
@keyframes type{
 from { width: 0; }
 to { width: 430px; }
}
@keyframes type2{
 from { width: 0; }
 to { width: 224px; }
}
@keyframes type3{
 from { width: 0; }
 to { width: 364px; }
}

Updated Fiddle here .