逐字显现

什么时候用

• 首屏主标题第一次出现，想让目光按顺序读过去
• 标语、口号、产品名这类二三十字以内的短文本
• 想强调半句话，让前半句先出现，后半句再接上

适用场景：文字 / 页面

推荐取值

单字时长

300–600ms

字间隔

20–50ms

位移

0.4–0.8em

缓动

cubic-bezier(0.22, 1, 0.36, 1)

字数上限

20–30 字

别搞混

• 和「打字机」的区别

  打字机是一个字符一个字符「被敲出来」，常配光标和等宽字体，文本长度在一点点变长；逐字显现是所有字已经站在排版位置上，只是依次从透明和偏移回到原位。

• 和「交错进场 stagger」的区别

  stagger 作用在一组独立元素上（列表项、卡片），逐字显现是先把一句话拆成单字，再对这串字套用同样的错峰逻辑，而且要额外处理读屏。

容易踩的坑

• 拆成单字 span 后读屏会一个字一个字念，必须给可视文字加 aria-hidden="true"，再放一份完整文本（sr-only 或 aria-label）给读屏。
• 英文按字母拆会打断单词、连字和字偶距，英文应该按词拆，或者用 Intl.Segmenter 按 grapheme 或 word 切。
• 每个字一个 DOM 节点，长文本会撑出上百个节点，总延迟也会拉到几秒；只给前 20–30 字加动画，其余直接显示。
• 字间隔乘字数就是最后一个字的等待时间：40 字乘 50ms 已经两秒，别让读者干等。
• prefers-reduced-motion 下要跳过延迟和位移，整句一次显示。

无障碍降级

prefers-reduced-motion: reduce 时去掉逐字延迟和位移，整句以最终状态一次渲染。

关键词

• split text
• per-character animation
• animation-delay
• translateY
• opacity
• sr-only
• prefers-reduced-motion

参考

• MDN · animation-delay
• web.dev · 用 transform 和 opacity 做动画

相关展品

• M-01交错进场Stagger
• M-04滚动揭示Scroll Reveal
• T-01流体排版Fluid Type