时间戳

首页 > 解决方案 > CSS文本段落动画在一个又一个段落运行后一直变慢

css-animations - CSS文本段落动画在一个又一个段落运行后一直变慢

问题描述

我是 CSS 动画的新手，一直在观看一些教程，但仍然需要大量练习，并且对它与“步骤（60，结束）”的工作方式感到困惑。我所知道的，如果我输入 60，那么文本会更快。

所以我有 5 段，我想每次运行 1 段，快速运行 1 秒，它正在工作，但在第三、第四和第五段之后，如果我添加“动画：文本- 2 2s 步骤(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>

标签： css-animations

解决方案

//你可以试试这个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;
  }
}

推荐阅读