如何通过循环实现模拟终端的CSS动画逐行延迟效果

嘿，我懂你现在的困扰——所有终端文本同时开始打字动画，完全没有真实终端逐行输出的质感对吧？咱们来把这个问题搞定！

首先先说说你之前尝试的循环哪里出了问题：

• 原生JS循环里，code_lines:nth-child(i)是CSS选择器语法，不能直接用在getElementsByClassName返回的HTMLCollection上，你得用索引code_lines[i]来访问元素。
• jQuery的循环里，你写错了选择器（应该是.line而不是line），而且没必要在each里面再套一层for循环，each本身就会遍历每个子元素。

方法一：纯CSS（适合固定行数的场景） #

如果你的终端行数是固定的，直接给每行设置递增的animation-delay就行，延迟时间刚好等于前一行的动画时长（你这里是2.5s）：

.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);
}
/* 给每行设置依次递增的延迟 */
.line:nth-child(1) { animation-delay: 0s; }
.line:nth-child(2) { animation-delay: 2.5s; }
.line:nth-child(3) { animation-delay: 5s; }
.line:nth-child(4) { animation-delay: 7.5s; }
.line:nth-child(5) { animation-delay: 10s; }

@keyframes typing { 
  from { width: 0 } 
  to { width: 100% } 
}

方法二：JavaScript动态设置（适合行数不固定的场景） #

如果你的终端内容是动态生成的，行数不固定，用JS遍历所有.line元素，给每个元素设置基于索引的延迟：

// 获取所有.line元素
const codeLines = document.querySelectorAll('.line');
// 遍历每个元素，索引从0开始，延迟时间=索引*动画时长
codeLines.forEach((line, index) => {
  line.style.animationDelay = `${index * 2.5}s`;
});

对应的CSS保留基础动画定义即可：

.terminal { 
  width: 500px; 
  height: 500px; 
  background-color: black; 
  color: white; 
  padding: 20px; 
}
.line { 
  white-space: nowrap; 
  overflow: hidden; 
  animation: typing 2.5s steps(30, end);
}

@keyframes typing { 
  from { width: 0 } 
  to { width: 100% } 
}

方法三：jQuery版本（如果你习惯用jQuery） #

修正你之前的jQuery代码，正确写法如下：

$('#terminal_text').children('.line').each(function(index) {
  $(this).css('animation-delay', `${index * 2.5}s`);
});

这样调整后，每个行会在前一行完成打字动画后再启动，完美模拟真实终端的逐行输出效果！

内容的提问来源于stack exchange，提问作者Megan Byers