创建带有循环的模拟终端以延迟CSS动画

Question

我正在尝试创建一个带有模拟终端的网站，该终端具有逐行键入的外观。我发现了一个CSS动画，一次只能显示一个字符，但是我遇到了延迟每一行动画以至于它们不能一次全部显示的问题。

这是我的代码：

//attempted javascript loop 
// var code_lines =document.getElementsByClassName("line");

// for (i=0; i<=5; i++){
//   code_lines:nth-child(i).style.animation = "typing 2.5s steps(30, end)";
// }


//attemped jquery loop 
//$('#terminal_text').children('line').each(function () {
//    for (i=0; i<=5; i++){
//  i.style.animation = "typing 2.5s steps(30, end)";
//}
//});

.terminal {
   width: 500px; 
  height: 500px;
  background-color: black; 
  color: white;
  padding: 20px;
}

.line {
   white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typing 2.5s steps(30, end);
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

<div class="terminal"> 

<div id="terminal_text">
    <p class="line"> Last login:  </p>
    <p class="line">megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
    <p class="line">Cloning into 'Rae_Portfolio"...</p>
    <p class="line">remote: Loading website illustrations: 172 objects, done.</p>
    <p class="line">remote: Counting objects: 100% (172/172) done.</p>
  </div>
</div>

我会调整时间，但现在我只希望动画开始一个接一个。我很难找到关于如何使用班级孩子应用动画的清晰示例。任何指导将不胜感激！

Codepen：https://codepen.io/coloradical/pen/gOaMzjm

Answer 1

这是我的处理方式：首先，从line标签中删除<p>类。然后，让一个Javascript程序将line类添加到第一个<p>，还为该元素上的animationend事件添加一个事件侦听器。 （请参阅How do you detect when CSS animations start and end with JavaScript?。）当该事件触发时，它将从当前line中删除类<p>，并将line类和相同的事件侦听器添加到下一个<p>。

换句话说，每次触发animationend时，它都会删除其触发元素的line类，并将line类以及事件侦听器添加到下一个<p>。