CSS 关键帧动画逐渐变慢答案

【问题标题】：CSS Keyframe Animations progressively slowing downCSS 关键帧动画逐渐变慢
【发布时间】：2016-02-03 16:51:34
【问题描述】：

我正在创建一个多行的书写动画（很像打字机）。一切都运行得比较好，但是每一行文本的解析/动画处理时间都比前一行要长。非常感谢任何帮助。

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>

【问题讨论】：

标签： html css animation css-animations

【解决方案1】：

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

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

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

根据W3C Spec：

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

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

演示：

应用上述两个更正，下面的 sn-p 将根据您的需要工作。

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>
      <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>

替代方法：

在不添加animation-fill-mode: backwards 的情况下使动画正常工作的另一种方法是将li 元素的默认width 设置为0，然后对其进行动画处理to30em 而不是对其进行动画处理@987654349 @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>
      <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>

注意：

在上面的 sn-p 中，在第一行之后可能看起来有很长的延迟/暂停，但这不是关键帧的问题。这是因为即使在整个文本变得可见之后，该元素仍会以完整宽度 (30em) 进行动画处理。

在下面的 sn-p 中，我为每个 li 元素添加了一个 background，以便您可以直观地了解我的意思。

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;
  background: mediumslateblue;
  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>
      <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>

【讨论】：

Harry，感谢您提供优雅的解决方案和信息丰富的 cmets。我今天学到了一些东西。

【解决方案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;
}

【讨论】：

也可以在 nth-child 声明中加入延迟而不重复动画。

【解决方案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 等值正在减慢速度。

【讨论】：

如果你删除这些行，那么所有lis 将同时动画。
没错，我认为您的回答更好。但从描述中我不确定这是否是我们想要的。
感谢大家的意见。我想要做的是让每一行动画，一个接一个。就好像真正会打字的人正在输入代码。第一个解决方案几乎可以工作 - 代码以相同的速度制作动画，一行接一行，但所有文本行从一开始都是可见的。