要用 CSS 逐字动画实现文字跳跃效果，必须将每个字符包裹在独立元素中（如 ），再用 @keyframes 配合 nth-child 和递增 animation-delay 控制弹跳时机，并注意字体加载、空格处理及移动端兼容性。
letter-spacing 不能解决文字跳跃加载效果
用 letter-spacing 模拟逐字动画是常见误解。它只影响字间距，不触发单个字符的独立位移动画，浏览器也不会为每个字母生成单独图层——结果就是整块文字一起抖，不是“跳跃”。真正要控制每个字母的偏移，必须把文字拆成 <span></span> 或用 splitText() 类库预处理。
用 CSS @keyframes + :nth-child 实现逐字母偏移
前提是 HTML 中每个字母已包裹在独立元素里（比如 <span class="char">A</span><span class="char">B</span>），否则 CSS 无法定位单个字符。关键点：
-
@keyframes jump定义transform: translateY(-12px)→translateY(0)的弹跳曲线，别用ease-in-out，选cubic-bezier(0.2, 0.8, 0.4, 1)更有“回弹感” - 每个
.char的animation-delay必须递增，比如0.1s、0.2s、0.3s……手写太累，建议用 Sass 循环或 JS 动态设style.animationDelay - 别忘了加
will-change: transform，否则长文本下频繁重排会卡顿
JS 动态拆字时注意空格和换行符
直接 text.split('') 会把空格、制表符、换行符也当“字母”处理，导致动画错位或空白跳跃。正确做法：
- 先用正则过滤：
text.replace(/[\s\u2000-\u200F\u2028\u2029]/g, '').split('') - 但更稳妥的是保留可视空格（比如中文段落间的全角空格
Array.from(text).filter(c => /\S/.test(c)) - 如果原文含 HTML 标签（如
<em>强调</em>），得先提取纯文本再拆，否则和 <code>>会被当成字符渲染出来
移动端 Safari 的 transform 闪屏问题
iOS 15+ 上，transform: translateY() 在低帧率设备上容易出现首帧闪烁或偏移量突变，尤其配合 opacity 动画时。临时解法：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
backface-visibility: hidden和-webkit-transform: translateZ(0) - 避免在
will-change中同时声明transform和opacity，拆成两个独立动画层 - 延迟启动动画：等
DOMContentLoaded后再给元素加class="animate"，别一上来就跑动画
最麻烦的其实是字体加载时机——如果用自定义字体，font-display: swap 会导致文字先用系统字体跳一次，等 WebFont 加载完又跳第二次。得用 document.fonts.load() 等字体就绪后再触发拆字和动画。
