直接对父容器加animation会失败，因为CSS动画作用于盒模型整体，无法让每个字符按索引产生相位差；必须将字符拆为独立span元素，设display:inline-block、微调间距、禁用换行，并为每个字符设置递增的animation-delay（推荐0.06s–0.08s）以模拟波浪效果。
为什么直接对整个文字容器加 animation 会失败
常见错误是给 .text 这类父元素直接加 @keyframes wave 和 animation，结果所有字同步上下跳——看起来像文字在抽搐，不是波浪。这是因为 CSS 动画作用于盒模型整体，无法让每个字符按索引产生相位差。
波浪的本质是「空间上错开、时间上延迟」：每个字符的 transform: translateY() 起始时刻不同，才能模拟正弦波的传播感。必须把字符拆成独立元素，再逐个控制 animation-delay。
如何正确拆分字符并设置基础样式
手动写 <span>A</span><span>B</span> 不现实，建议用 JS 一次性生成（开发时执行一次即可）：
const text = '波浪效果';
const container = document.querySelector('.wavy');
container.innerHTML = text.split('').map(c => `<span class="char">${c}</span>`).join('');
对应 CSS 必须包含以下关键项：
立即学习“前端免费学习笔记（深入）”；
-
.char必须设display: inline-block—— 否则transform在部分浏览器中不生效，或字符重叠 - 父容器设
letter-spacing: 2px控制原始间距，再给.char加margin-right: -2px抵消拆分后多出的间隙 - 禁用默认换行：
white-space: nowrap防止长文本断行破坏波形
animation-delay 差值怎么选才自然
延迟值不是随便填的。太小（如 0.01s）人眼难分辨相位差；太大（如 0.3s）会导致波形断裂、像分段抖动。
实测推荐区间：
- 动画总时长设
2.5s或3s（太快像痉挛，太慢无流动感） - 相邻字符
animation-delay差值取0.06s–0.08s，例如：nth-child(1) { animation-delay: 0s; }，nth-child(2) { animation-delay: 0.06s; }，依此类推 - 若文字超过 12 字，建议用 JS 动态计算延迟，避免手写 20 行 CSS
示例关键帧：
@keyframes wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-6px); }
50% { transform: translateY(0); }
75% { transform: translateY(6px); }
}
容易被忽略的兼容性与性能点
这个方案在 Safari 15.4+、Chrome 90+、Firefox 88+ 均可稳定运行，但有两个硬伤常被跳过：
- 未加
will-change: transform到.char：长文本（>15 字）动画可能掉帧，尤其低端安卓机 - 没处理字体加载时机：若用自定义字体，需等
font-display: swap或 JS 监听document.fonts.load后再启动动画，否则首帧字符位置错乱 - 移动端 touch 操作频繁时，建议加
pointer-events: none到.char，避免干扰点击穿透
最简健壮结构就这三步：拆字符 → 设 inline-block + 间距微调 → 用递增 animation-delay 驱动位移。其余都是为绕过浏览器渲染边界的补丁。
