创建一个带有循环的模拟终端来延迟 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>我将调整时间，但现在我只想让动画一个接一个地开始。我很难找到如何使用班级儿童应用动画的清晰示例。任何指导将不胜感激！代码笔： https: //codepen.io/coloradical/pen/gOaMzjm