我正在嘗試創建一個帶有模擬終端的網站，該終端具有逐行鍵入的外觀。我發現了一種一次顯示一個字符的 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