CSS文本段落动画在一个接一个的段落运行后继续减慢

Question

我是CSS动画的新手，一直在看一些教程，但仍然需要大量的实践和困惑，它是如何与“步骤(60，结束)”。我所知道的是，如果我输入60，那么文本就会更快。

所以我有5个段落，我想要一段接一段地快速运行，比如1秒，它是有效的，但在第三，第四和第五段之后，它变得更慢，如果我添加“动画:文本-2 2s steps(60，end);”对于每个段落，它运行得很快，但它不会一个接一个地运行。我在这里做错了什么？

​

.p1 {
  white-space: nowrap;
  overflow: hidden;
  width: 80px;
  border: 1px solid green;
  animation: text-1 1s steps(60, end);
}

.p2 {
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
  border: 1px solid green;
  animation: text-2 2s steps(60, end);
}

.p3 {
  white-space: nowrap;
  overflow: hidden;
  width: 110px;
  border: 1px solid green;
  animation: text-2 4s steps(60, end);
}

.p4 {
  white-space: nowrap;
  overflow: hidden;
  width: 80px;
  border: 1px solid green;
  animation: text-2 8s steps(60, end);
}

.p5 {
  white-space: nowrap;
  overflow: hidden;
  width: 82px;
  border: 1px solid green;
  animation: text-2 16s steps(60, end);
}


@keyframes text-1 {
  from {
    width: 0;
  }
}

@keyframes text-2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}

<div class="wrapper">
        <div class="first-row">
          <p class="p1">Paragraph 1</p>
          <div class="p2">
            <img src="#">
            <span>Paragraph 2</span>
          </div>
        </div>
        <div class="second-row">
          <p class="p3">Paragraph 3 <span> text</span></p>
          <p class="p4">Paragraph 4</p>
        </div>
        <div class="third-row">
          <p class="p5">Paragraph 5 <span>text</span></p>
        </div
</div>

​

Answer 1

//您可以尝试此css代码

.p1 {
  white-space: nowrap;
  overflow: hidden;
  width: 80px;
  border: 1px solid green;
  animation: text-1 1s steps(60, end);
}

.p2 {
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
  border: 1px solid green;
  animation: text-2 2s steps(120, end);
}

.p3 {
  white-space: nowrap;
  overflow: hidden;
  width: 110px;
  border: 1px solid green;
  animation: text-2 3s steps(180, end);
}

.p4 {
  white-space: nowrap;
  overflow: hidden;
  width: 80px;
  border: 1px solid green;
  animation: text-2 4s steps(240, end);
}

.p5 {
  white-space: nowrap;
  overflow: hidden;
  width: 82px;
  border: 1px solid green;
  animation: text-2 5s steps(300, end);
}


@keyframes text-1 {
  from {
    width: 0;
  }
}

@keyframes text-2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}