纯 CSS 的 @keyframes 无法实现逐行渐入，必须用 JavaScript 拆分行并动态控制每行动画时机；因换行符不生成 DOM 节点，需用 textContent.split('\n') 创建独立 .line 元素，配合 animation-fill-mode: forwards 和合理延迟节奏确保自然动画。
纯 CSS 的 @keyframes 无法真正实现“逐行渐入”——它只能控制整块文本的 opacity 或 transform，不能感知换行、也不能按行延迟。必须用 JavaScript 拆分行并动态控制每行的动画时机。
为什么直接用 animation-delay + nth-child 不行
很多人尝试给每行 <p> 或 <div> 加 animation-delay，但前提是：你得先有“每行一个元素”。HTML 中的换行符 \n 在渲染时不会自动变成独立 DOM 节点，white-space: pre-line 只影响布局，不生成新元素。所以：
– 用 innerText.split('\n') 得到的只是字符串数组，不是 DOM 行节点
– 用 querySelectorAll('br') 也无法准确定位逻辑行（尤其含 inline 元素时）
– 直接对父容器设 animation-delay，所有子行仍同步入场
正确做法：JS 拆行 + 动态插入带动画类的容器
核心是把原始文本按 \n 切开，为每行创建独立 <div class="line">，再逐个添加入场类。关键细节：
- 用
textContent获取原始内容，避免 HTML 解析干扰（比如<br>或实体） - 用
String.prototype.split('\n')，不要用正则/\r?\n/—— 它可能多拆出空行 - 每行
<div>必须设display: block和固定line-height，否则动画中高度塌缩或跳动 - CSS 动画需带
animation-fill-mode: forwards，否则行一进完就回退透明
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.line {
opacity: 0;
transform: translateY(10px);
}
.line.animated {
animation: fadeInUp 0.4s ease-out forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}逐行动画节奏怎么调才自然
固定延迟（如每行 +0.3s）会显得机械。更贴近人工打字的节奏应包含变量：
- 首行延迟建议 0.2–0.4s，给用户视觉准备时间
- 后续行延迟用
0.3 + Math.random() * 0.2，范围控制在 0.3–0.5s 内 - 遇到空行或短行（字符数 ≤ 3），可缩短延迟至 0.15s，避免卡顿感
- 若某行含
<strong>或链接，动画前确保其样式已就绪，否则字体回流会导致位置偏移
JS 插入时别用 innerHTML += —— 每次都会重建子树，破坏事件监听器和表单状态。改用 document.createElement('div') + appendChild()。
移动端和字体加载的坑
iOS Safari 下，如果用了自定义字体且 font-display: swap，首帧动画可能基于系统字体渲染，等 Web Font 加载后再重绘，造成文字“闪一下”或位置跳变：
- 保险做法：等
document.fonts.ready后再启动动画序列 - 或者给容器预设
min-height（如min-height: calc(1.5em * 8)），锁定行高空间 - 长文本（>50 行）别用
setTimeout链式调用 —— 容易因 JS 主线程阻塞导致动画掉帧；改用requestAnimationFrame+ 时间戳调度 - 禁用 JS 时，记得在
<noscript>里放完整文本，否则用户什么也看不到
真正的难点不在“怎么动”，而在“怎么不动——不让字体、行高、盒模型在动画中途发生不可控变化”。所有样式锚点（line-height、font-size、white-space）必须在动画开始前稳定，否则逐行动画就会变成逐行抖动。
