CSS文字跳跃加载效果_通过延时控制每个字母的上下偏移

要用 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(/[su2000-u200Fu2028u2029]/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() 等字体就绪后再触发拆字和动画。