逐行延迟显现的本质是为每行文字创建独立并分别设置animation-delay，需用:nth-child(n)配合calc()动态计算延迟值，搭配opacity或transform实现动画，避免visibility和display等不可动画属性，同时注意Safari对小数延迟的精度限制。
用 CSS animation-delay 控制每行文字出现时机
逐行延迟显现的本质，是把每行文字包进独立 <span></span>，再给每个 <span></span> 单独设 animation-delay。不能靠父容器统一 delay，否则所有行一起动；也不能只用一个 @keyframes 配全局 delay，那没法区分行序。
常见错误是写成这样：.line { animation: fadeIn 0.5s forwards; animation-delay: 0.2s; }——结果所有行都等 0.2s 后同时进场。必须让第 2 行 delay 0.4s、第 3 行 0.6s……才能形成“逐行”节奏。
- 手动写 N 行就写 N 条规则：比如
.line:nth-child(1) { animation-delay: 0s; }、.line:nth-child(2) { animation-delay: 0.2s; } - 更稳妥的是用 CSS 自定义属性 +
calc()：给容器设--delay-step: 0.2s，然后.line:nth-child(n) { animation-delay: calc((n - 1) * var(--delay-step)); } - 注意
nth-child(n)的n是从 1 开始计数，别写成(n)或漏掉- 1，否则第 1 行也会延迟
opacity + transform 比纯 visibility 更可靠
只用 visibility: hidden → visible 无法触发 CSS 过渡（visibility 不是可动画属性），必须搭配 opacity 或 transform 才能有淡入/位移效果。
典型错误是写 visibility: hidden; transition: visibility 0.3s——完全无效，浏览器直接跳变。真正起作用的是 opacity 的线性变化，或 transform: translateY(10px) → translateY(0) 这类位移。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
opacity: 0; transform: translateY(5px); animation: fadeInUp 0.4s forwards; @keyframes fadeInUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }- 避免用
display: none → block：它不可动画，且会破坏文档流重排，导致后续行位置跳动
JS 动态生成 <span></span> 时注意换行符处理
如果原文本来自 textarea 或 API，含 \n，不能直接用 split('\n') 后塞进 <span></span>——HTML 里换行符不渲染为换行，得转成 <br> 或用 white-space: pre-line，但后者会让所有 <span></span> 堆在同一行。
正确做法是：每行文本单独包裹，且保留块级行为。否则即使加了 delay，所有 <span></span> 仍在一行内挤着出现。
- 服务端或 JS 处理时，用
text.split('\n').map(line => `<span class="line">${line}</span>`).join('') - 对应 CSS 必须设
.line { display: block; }，否则 inline 元素无视nth-child的物理顺序（DOM 顺序 ≠ 渲染顺序） - 若原文含 HTML 标签（如
<strong></strong>），需先做转义再拆分，否则split('\n')可能切在标签中间，破坏结构
移动端 Safari 对 animation-delay 小数精度敏感
Safari 在 iOS 15–16 上对 animation-delay 小于 0.1s 的值常忽略或四舍五入归零，比如设 0.05s 实际当 0s 处理，导致前几行几乎同时出现。
这不是 bug，是 WebKit 对极短延迟的主动降噪——防止大量微小动画拖慢主线程。所以别指望用 0.03s 实现“丝滑逐字”，逐行最小建议间隔设到 0.15s 起。
- 测试时务必真机连 Safari 调试，
localhost下 Chrome 模拟器不反映此问题 - 若需要更快节奏，改用 JS 控制
setTimeout触发classList.add，绕过 CSS delay 精度限制 - 别为了“看起来更密”硬压 delay，人眼对 0.1s 内的间隔差异不敏感，反而易因渲染抖动觉得卡
实际要让每行严格按序显现，关键不在动画多炫，而在 DOM 结构干净、CSS 选择器匹配准确、延迟值避开浏览器精度陷阱。细节错一点，整段就糊成一团。
