Html 如何使我的文本动画以一定的顺序运行，并使用CSS在页面中间开始？

当文本动画开始时，如何让文本动画按下面列出的顺序运行，而不是从第1行、第3行到第2行？例如，我希望每一行按以下顺序显示

• 欢迎来到我的数字作品集
• 我叫利亚姆·多切蒂
• 我是来自伦敦的前端web开发人员

如何使文本动画从页面的中间开始，而不是从左侧滑动

欢迎来到我的数字产品组合
我叫利亚姆·多切蒂

我是来自伦敦的前端web开发人员

由于似乎简单的

文本对齐：居中

无法在不弄乱动画的情况下居中文本，因此您可以为文本设置明确的宽度（无论此字体/大小组合的宽度是多少），然后使用

自动

左右边距将其居中

然后，给每个句子一个单独的动画，其

动画延迟

等于之前每个动画的总长度。在我下面使用的

动画

速记中，第二个数字是延迟。第一个数字（

4s

在每种情况下）是

动画持续时间

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

但是，由于此方法的默认样式为0宽度，请设置
向前的
动画填充模式
，以确保文本在完成动画制作后不会消失

<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 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; }
}