html - CSS3打字机效果

Question

我这里有一个 CSS3 代码，它具有打字机效果。

我想做的是为一行 <p></p> 设置动画然后删除它然后为下一个<p></p>设置动画.我已经做到了第一行。但是我怎样才能删除第一行然后继续下一行。

这是到目前为止的代码。

.css-typing {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 5s steps(50, end);
  animation: type 5s steps(50, end);
}
@keyframes type {
  from {
    width: 0;
  }
}
@-webkit-keyframes type {
  from {
    width: 0;
  }
}

<p class='css-typing'>To save their world</p>
<p class='css-typing'>They must come to ours</p>
<p class='css-typing'>Spongebob out of water</p>

Answer 1

根据你的问题，我假设你不是在寻找自然的打字机效果，而是更多关于如何将你已经创建的内容扩展到第二行、第三行以及在第二行动画时隐藏第一行等等在。如果确实如此，请进一步阅读。

由于您必须为多个元素设置动画但不能同时设置，因此您需要添加延迟。应计算每个元素的延迟，以便所有先前元素在当前元素的动画开始时完成其动画。因此，例如，第一个元素不需要延迟，但第二个元素需要 5 秒延迟，第三个元素需要 10 秒延迟，依此类推。这些延迟可以通过使用 nth-child 选择器应用于元素，如下面的代码片段所示。

最后，由于您希望在下一个元素设置动画时前几行消失，因此元素的默认/原始宽度应为 0，并且应设置为 10em。

.css-typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
@keyframes type {
  to {
    width: 10em;
  }
}
@-webkit-keyframes type {
  to {
    width: 10em;
  }
}

p{
  -webkit-animation: type 5s steps(50, end);
  animation: type 5s steps(50, end);
}
p:nth-child(2){
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
p:nth-child(3){
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

<p class='css-typing'>To save their world</p>
<p class='css-typing'>They must come to ours</p>
<p class='css-typing'>Spongebob out of water</p>