直接写 nth-child(1) 到 nth-child(20) 易翻车，因它按父容器所有子节点序号计数，遇换行、空格或动态插入元素即错位；应改用 span 包裹字符并预设起始状态，延迟差值严格控制在 0.06s–0.08s。
为什么直接写 nth-child(1) 到 nth-child(20) 很容易翻车
因为实际页面中，nth-child 计数的是父容器内所有子节点的序号，不是“第几个文字元素”。只要中间插了个 <br>、空格文本节点，或 JS 动态插入的其他标签，序号就全偏了——比如你本想给第 3 个字母设 animation-delay: 0.18s，结果它被算成 :nth-child(5)，延迟错配，波浪就断层。
更麻烦的是，超过 12 字的手动写 12+ 条 nth-child(n) 规则，CSS 文件臃肿、难维护，且无法响应字体大小缩放或换行重排。实测在 Safari iOS 上，超过 15 条同类选择器会触发渲染抖动。
- 优先用
span包裹每个字符，确保父容器里只有这些span（无文本节点、无注释） - 若内容来自 CMS 或用户输入，必须用 JS 预处理：先
textContent.split('')，再逐个createElement('span')插入 - 别依赖
nth-of-type—— 它只认标签名，一旦混入<em>或<strong>，同样失效
animation-delay 的差值怎么选才不抽搐
差值不是随便递增 0.1s 就行。太小（如 0.02s）人眼分辨不出节奏，像整体抖；太大（如 0.15s）会导致后半段文字明显滞后，尤其动画总时长仅 1.2s 时，最后几个字还没起跳，用户已经滑走了。
实测稳定区间是 0.06s–0.08s，配合总时长 2.5s 或 3s。例如 10 字标题，从 0s 起，按 0.07s 递增，末尾延迟为 0.63s，仍在动画周期内，视觉连贯。
立即学习“前端免费学习笔记（深入）”；
- 避免用整数秒（如
1s、2s），容易卡顿；一律写0.07s，不写.07s（单位必须显式） - 如果动画用
cubic-bezier(0.1, 0.5, 0.2, 1)这类缓入缓出曲线，延迟差值可略放大到0.08s，增强起伏感 - 移动端需额外加
will-change: transform到span，否则部分安卓 WebView 会掉帧
JS 动态设置 animation-delay 的安全时机
很多人习惯先 innerHTML = '...'，再 querySelectorAll('span').forEach(...) 补 delay —— 这在快速滚动或低性能设备上大概率漏掉部分 span，因为 DOM 插入和样式计算有微任务延迟。
正确做法是「创建即配置」：每个 span 元素在 document.createElement('span') 后、append() 前，立刻写入 style.animationDelay。这样不依赖渲染完成，也不触发重排。
- 示例：
const span = document.createElement('span'); span.style.animationDelay = (i * 0.07).toFixed(2) + 's'; parent.append(span); - 不要用
setTimeout或requestAnimationFrame包裹赋值——多一层调度反而增加不确定性 - 若需随机波浪相位（比如让每次刷新起伏起点不同），可用
Math.random() * 0.3 - 0.15生成 [-0.15s, 0.15s] 范围负延迟，infinite动画会自动从对应相位开始
@keyframes 里 top / transform / text-shadow 怎么配才不闪
最常踩的坑是：只在 @keyframes 第一帧写 top: 0，没在元素默认样式里声明起始状态。结果页面加载瞬间，文字先“啪”一下落到默认位置，再突然向上浮动——这就是闪。
必须把起始态写死在普通 CSS 规则里，比如 span { position: relative; top: 0; }，然后动画只控制变化过程。同理，text-shadow 若只在动画里定义，也会在循环时反复重绘，导致边缘发虚。
- 推荐用
transform: translateY()替代top，硬件加速更稳；但注意transform不触发重排，所以起始值也得提前设好：span { transform: translateY(0); } - 若动画含颜色或阴影变化，把基础色值（如
color: #333）也写在默认样式，避免动画第一帧突变 - 别用
animation简写覆盖已有 delay：比如已设style.animationDelay = '0.2s'，再执行element.style.animation = 'wave 2.5s'，delay 会被清空
关键点其实就两个：延迟差值必须落在 0.06s–0.08s 区间，且每个字符的起始状态必须在动画外预先声明。其它都是围绕这两条防崩的补丁。
