Question

我正在多行创建一个写入动画（很像打字机）。所有这些都运行得相对较好，但每行文本比前一行需要更长的时间来解析/动画。非常感谢任何帮助。

body {
  background: #272822;
  padding-top: 10px;
}
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 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);
}
.red {
  color: red;
}
.green {
  color: green;
}
.white {
  color: white;
}
.yellow {
  color: yellow;
}
@keyframes type {
  from {
    width: 0;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}

<div class="codeWriteOn">
  <ul class="MonokaiBright">
    <li>
      <span>&#x3c;</span><span class="red">ul</span>
      <span class="green">class</span>&#61;<span class="yellow">&#8220;markup&#8221;</span><span>&#x3e;</span>
    </li>
    <li class="project1">
      &nbsp;&nbsp;<span>&#x3c;</span><span class="red">li</span>
      <span class="green">class</span>&#61;<span class="yellow">&#8220;project1&#8221;</span><span>&#x3e;</span>
      <!-- ">" --><span>Project-1&#x3c;</span><span class="red">/li</span><span>&#x3e;</span>
    </li>
    <li class="project2">
      &nbsp;&nbsp;<span>&#x3c;</span><span class="red">li</span>
      <span class="green">class</span>&#61;<span class="yellow">&#8220;project2&#8221;</span><span>&#x3e;</span>
      <!-- ">" --><span>Project-2&#x3c;</span><span class="red">/li</span><span>&#x3e;</span>
    </li>
    <li class="project3">
      &nbsp;&nbsp;<span>&#x3c;</span><span class="red">li</span>
      <span class="green">class</span>&#61;<span class="yellow">&#8220;project3&#8221;</span><span>&#x3e;</span>
      <!-- ">" --><span>Project-3&#x3c;</span><span class="red">/li</span><span>&#x3e;</span>
    </li>
    <li class="project4">
      &nbsp;&nbsp;<span>&#x3c;</span><span class="red">li</span>
      <span class="green">class</span>&#61;<span class="yellow">&#8220;project4&#8221;</span><span>&#x3e;</span>
      <!-- ">" --><span>Project-4&#x3c;</span><span class="red">/li</span><span>&#x3e;</span>
    </li>
    <li>
      &#x3c;</span><span class="red">/ul</span><span>&#x3e;</span>	
    </li>
  </ul>
</div>

Answer 1

answer provided by spacegeek224在正确的轨道上，但它是部分的，这就是为什么你仍然看到它的问题。

根据您的代码，width元素的初始li为30em，并且在动画的关键帧中指定width应为{{1}设置动画} from。当在元素上设置0em并且未指定animation-delay时，该元素将继续保持在animation-fill-mode: backwards之外指定的状态，直到延迟时间结束。这就是为什么从一开始就可以看到所有@keyframes。

如果指定了li，则元素将继续保持其第一个关键帧（animation-fill-mode: backwards或0%）的状态，直到延迟时间结束。因此，元素将在延迟期间占用from，因此在动画开始之前变为不可见。

根据W3C Spec：

如果'animation-fill-mode'的值为'向后'，则动画将应用在关键帧中定义的属性值，这将在动画延迟定义的时间段内开始动画的第一次迭代”。

另外需要注意的是，如果您希望所有元素一个接一个地动画，那么它们的延迟应该设置为等于所有先前元素完成它们所需的总时间动画。因此width: 0的延迟为:nth-child(2)，3s的延迟应为:nth-child(3)，依此类推。

<强>演示：

同时应用上述更正，下面的代码段可以根据您的需要使用。

4.5s

body {
  background: #272822;
  padding-top: 10px;
}
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) backwards;
}
li:nth-child(2) {
  animation-delay: 1.5s;
}
li:nth-child(3) {
  animation-delay: 3s;
}
li:nth-child(4) {
  animation-delay: 4.5s;
}
li:nth-child(5) {
  animation-delay: 6s;
}
li:nth-child(6) {
  animation-delay: 7.5s;
}
.red {
  color: red;
}
.green {
  color: green;
}
.white {
  color: white;
}
.yellow {
  color: yellow;
}
@keyframes type {
  from {
    width: 0;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}

替代方法：

在不添加<div class="codeWriteOn"> <ul class="MonokaiBright"> <li> <ul class=“markup”> </li> <li class="project1">   <li class=“project1”> Project-1</li> </li> <li class="project2">   <li class=“project2”> Project-2</li> </li> <li class="project3">   <li class=“project3”> Project-3</li> </li> <li class="project4">   <li class=“project4”> Project-4</li> </li> <li> </ul> </li> </ul> </div>的情况下让动画正常工作的另一种方法是将animation-fill-mode: backwards元素的默认width设置为li，然后为其设置动画{{1} } 0而不是动画to 30em。这意味着在延迟期间，from仍为0，因此width将不可见。

但是，在这种情况下，应添加0以使li保持其最终关键帧的状态。否则，在完成动画后，它将恢复为不可见（animation-fill-mode: forwards）。

li

width: 0

注意：

在上面的代码段中，看起来好像在第一行之后有一个很长的延迟/暂停，但这不是关键帧的问题。这是因为即使在整个文本变得可见之后，元素仍然以其全宽（body { background: #272822; padding-top: 10px; } li { color: white; font-family: "Courier"; font-size: 16px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 0; animation: type 1.5s steps(30, end) forwards; } li:nth-child(2) { animation-delay: 1.5s; } li:nth-child(3) { animation-delay: 3s; } li:nth-child(4) { animation-delay: 4.5s; } li:nth-child(5) { animation-delay: 6s; } li:nth-child(6) { animation-delay: 7.5s; } .red { color: red; } .green { color: green; } .white { color: white; } .yellow { color: yellow; } @keyframes type { to { width: 30em; } } @keyframes type2 { 0% { width: 0; } 50% { width: 0; } 100% { width: 100; } }）为动画。

在下面的代码段中，我为每个<div class="codeWriteOn"> <ul class="MonokaiBright"> <li> <ul class=“markup”> </li> <li class="project1">   <li class=“project1”> Project-1</li> </li> <li class="project2">   <li class=“project2”> Project-2</li> </li> <li class="project3">   <li class=“project3”> Project-3</li> </li> <li class="project4">   <li class=“project4”> Project-4</li> </li> <li> </ul> </li> </ul> </div>元素添加了30em，以便您可以直观地看到我的意思。

background

li

Answer 2

不要增加每个动画的动画时间，而是使用animation-delay: 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;
}

Answer 3

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

    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等值正在减慢它的速度。

CSS关键帧动画逐渐减慢

3 个答案: