文字波浪动画需将每个字符单独包裹为元素，用@keyframes定义translateY周期变化，并通过不同animation-delay实现错峰起伏；必须设display:inline-block和letter-spacing保障布局与变形效果。
用 animation + @keyframes 实现文字波浪动画
核心是把每个字符单独包裹，再用 transform: translateY() 配合不同延迟做错峰起伏。纯 CSS 就能搞定，不需要 JS。
常见错误是直接对整个 <span> 应用动画，结果所有字一起上下跳——看起来像抖动，不是波浪。
- 必须把每个字符拆成独立元素（比如用
<span class="char">a</span><span class="char">b</span>） - 用
@keyframes wave定义一个transform: translateY()的周期性变化（比如从0→-8px→0→8px→0） - 给每个
.char设置相同动画但不同animation-delay，差值控制在0.05s–0.1s比较自然 - 动画时长建议设为
2s–3s，太快像抽搐，太慢看不出流动感
letter-spacing 和 display: inline-block 必须配齐
字符拆开后，默认仍是 inline 元素，transform 对它生效但容易挤在一起或换行错位。
所以每个 .char 要加 display: inline-block 确保变换有独立盒模型；同时父容器设 letter-spacing 控制原始间距，避免拆分后文字粘连。
立即学习“前端免费学习笔记（深入）”；
- 不加
display: inline-block：某些浏览器下transform无效，或文字重叠 - 不调
letter-spacing：拆分后默认间距消失，字挨得太近，波浪效果被压缩变形 - 推荐父容器设
letter-spacing: 2px，再给每个.char设margin-right: -2px微调，兼容性更稳
IE 不支持？那就别强求
transform 在 IE10+ 基本可用，但 transform: translateY() 在 IE10/11 里对 inline 元素支持不稳定——哪怕加了 inline-block，也可能偏移错位或动画卡顿。
如果项目明确要兼容 IE，这条路基本走不通；换成 SVG <textPath> 或 Canvas 是更靠谱的替代方案，但复杂度翻倍。
- CSS 波浪动画实际只推荐用于 Chrome/Firefox/Safari/Edge 84+
- 移动端 iOS Safari 13.4+、Android Chrome 80+ 表现良好
- 别试图用
-ms-transform或-webkit-transform去“修复” IE，大概率白忙
性能隐患：别在长段落里滥用
每个字符一个 DOM 节点 + 一套动画规则，10 个字是 10 个动画，100 个字就是 100 个。浏览器得为每个节点单独计算帧、合成图层，内存和重绘压力明显上升。
尤其在低端 Android 设备上，30 字以上的波浪文字容易掉帧，甚至触发强制 GPU 合成导致页面其他动画变卡。
- 安全上限建议控制在
15–20个字符以内（比如 slogan、标题） - 绝对不要用在正文段落、列表项或可滚动区域里
- 如果必须用在动态内容中，加个长度判断：超过
20字就降级为普通文字 +opacity微动
