Html CSS关键帧动画逐渐变慢

我正在用几行文字制作一个手写动画（很像打字机）。所有这些都工作得比较好，但是每一行文本都比前一行需要更长的时间来解析/设置动画。非常感谢您的帮助

正文{
背景：#272822；
填充顶部：10px；
}
李{
颜色：白色；
字体系列：“信使”；
字体大小：16px；
利润率：10px 0 10px；
空白：nowrap；
溢出：隐藏；
宽度：30em；
动画：键入1.5s步骤（30，结束）；
}
李：第n个孩子（2）{
动画：键入2 1.5s步骤（60，结束）；
}
李：第n个孩子（3）{
动画：键入2.5s步骤（60，结束）；
}
李：第n个孩子（4）{
动画：类型2 4.25s步骤（60，结束）；
}
李：第n个孩子（5）{
动画：键入2 5.5s步骤（60，结束）；
}
李：第n个孩子（6）{
动画：键入2 7s步骤（60，结束）；
}
瑞德先生{
颜色：红色；
}
格林先生{
颜色：绿色；
}
怀特先生{
颜色：白色；
}
黄先生{
颜色：黄色；
}
@关键帧类型{
从{
宽度：0；
}
}
@关键帧类型2{
0% {
宽度：0；
}
50% {
宽度：0；
}
100% {
宽度：100；
}
}

<；保险商实验室
第61类“标记&8221>；


<；锂
第61类“项目1和8221>；
项目-1和x3c/李>；


<；锂
第61类“项目2和8221>；
项目2和x3c/李>；


<；锂
第61类“项目3和8221>；
项目-3和x3c/李>；


<；锂
第61类“项目4和8221>；
项目-4和x3c/李>；


</ul&x3e；	

使用

动画延迟：1s

（用延迟替换

1s

），并将每个

li

的动画时间更改为相同的数字，而不是增加每个动画的时间

例如：

li {
  color: white;
  font-family: "Courier";
  font-size: 16px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 1.5s steps(30, end);
}
li:nth-child(2) {
  animation: type2 1.5s steps(60, end);
}
li:nth-child(3) {
  animation: type2 1.5s steps(60, end);
animation-delay: 1s;
}
li:nth-child(4) {
  animation: type2 1.5s steps(60, end);
animation-delay: 2.75s;
}
li:nth-child(5) {
  animation: type2 1.5s steps(60, end);
animation-delay: 4s;
}
li:nth-child(6) {
  animation: type2 1.5s steps(60, end);
animation-delay: 6.5s;
}

---

我不太确定你的问题是什么，但也许我会假设你不想让它越来越慢。如果是这种情况，您需要删除这些行

    li:nth-child(2) {
      animation: type2 1.5s steps(60, end);
    }
    li:nth-child(3) {
      animation: type2 2.5s steps(60, end);
    }
    li:nth-child(4) {
      animation: type2 4.25s steps(60, end);
    }
    li:nth-child(5) {
      animation: type2 5.5s steps(60, end);
    }
    li:nth-child(6) {
      animation: type2 7s steps(60, end);
    }

那些

1.5s

、

2.5s

等值正在使其变慢。

在正确的轨道上，但它是部分的，这就是为什么您仍然看到它的问题

根据您的代码，

li

元素的初始

width

是

30em

，并且在动画的关键帧中指定

width

应该从

0em
设置
动画。当在元素上设置
动画延迟
且未指定
动画填充模式：向后
时，元素将继续保持在
@关键帧
之外指定的状态，直到延迟时间过去。这就是为什么从一开始就可以看到所有的
li

如果指定了
动画填充模式：向后
，元素将继续保持其第一个关键帧的状态（即
0%
或
from
），直到延迟时间过去。因此，元素在延迟期间将占据
宽度：0
，因此在动画开始之前不可见

根据：

如果“动画填充模式”的值为“向后”，则动画将在“动画延迟”定义的时间段内应用关键帧中定义的特性值，该关键帧将开始动画的第一次迭代

另一件需要注意的事情是，如果希望所有元素一个接一个地设置动画，那么它们的延迟应该设置为等于所有先前元素完成动画所需的总时间。因此，
：n个孩子（2）
上的延迟将是
3s
，因为
：n个孩子（3）
应该是
4.5s
，依此类推

演示：

应用上述两个更正，下面的代码片段将根据您的需要工作


正文{
背景：#272822；
填充顶部：10px；
}
李{
颜色：白色；
字体系列：“信使”；
字体大小：16px；
利润率：10px 0 10px；
空白：nowrap；
溢出：隐藏；
宽度：30em；
动画：向后键入1.5s步数（30，结束）；
}
李：第n个孩子（2）{
动画延迟：1.5s；
}
李：第n个孩子（3）{
动画延迟：3s；
}
李：第n个孩子（4）{
动画延迟：4.5s；
}
李：第n个孩子（5）{
动画延迟：6秒；
}
李：第n个孩子（6）{
动画延迟：7.5s；
}
瑞德先生{
颜色：红色；
}
格林先生{
颜色：绿色；
}
怀特先生{
颜色：白色；
}
黄先生{
颜色：黄色；
}
@关键帧类型{
从{
宽度：0；
}
}
@关键帧类型2{
0% {
宽度：0；
}
50% {
宽度：0；
}
100% {
宽度：100；
}
}



<；保险商实验室
第61类“标记&8221>；


<；锂
第61类“项目1和8221>；
项目-1和x3c/李>；


<；锂
第61类“项目2和8221>；
项目2和x3c/李>；


<；锂
第61类“项目3和8221>；
项目-3和x3c/李>；


<；锂
第61类“项目4和8221>；
项目-4和x3c/李>；


</ul&x3e；	


如果删除这些行，那么所有的
li
s将同时动画。是的，我认为你的答案更好。但从描述来看，我不确定这是否是我想要的。谢谢大家的意见。我想做的是让每一行动画，一个接一个。好像一个真正会打字的人在输入代码。第一个解决方案几乎奏效了——代码以相同的速度制作动画，一行接一行，但是所有的文本行都可以从屏幕上看到