Question

我是CSS动画的新手，已经从一些教程中进行了观看，但是仍然需要大量实践，并且将其与“ steps（60，end）”一起使用时感到困惑。我所知道的，如果我输入60，那么文字会更快。

所以我有5个段落，我想每次连续运行1个段落以进行1秒钟的快速运行，这是可行的，但是在第三，第四和第五段之后，如果我添加“动画”，它将变得越来越慢：text-2 2s步骤（60，结束）；”对于每个段落，它运行得很快，但是并没有一个接一个地运行。我在这里做什么错了？

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

CSS文本段落动画在逐段运行后持续变慢

1 个答案: