TYPOGRAPHY
逐字入场动画Text Reveal Animation
标题拆成单字，每个字错开 40-70ms 依次上浮入场——高级感的入场标配。
效果预览
为创作者而生
每个字符错开 70ms 依次升起
适合用在哪
Hero 标题、章节标题、获奖页面、作品集开场。
容易踩的坑
- 拆成单字 span 后读屏逐字念出，需在父元素加 aria-label 并对子元素 aria-hidden。
- 首屏标题初始 translateY(110%) 隐藏，JS 加载慢时用户先看到一片空白。
- 中英文混排按字符统一拆分，英文单词被拆成字母后在窄屏中间断行。
设计提示词 · Prompt
逐字入场动画（Text Reveal）：把标题按字符拆分（中文按字、英文按词更自然），每个字符包一层 overflow:hidden 的外框 + 内层 span 初始 translateY(110%)，进入视口后依次归位（每个递延 40-70ms，时长 600-800ms、cubic-bezier(.22,1,.36,1)）。overflow:hidden 版是"从下方升起"，opacity 版是"浮现"——前者更利落。拆字用 JS（按 DOM 拆不打断布局）或 GSAP SplitText。整段动画总时长控制在 1.2s 内。千万别在长段落用——逐字动画只属于标题。
Text Reveal: split the heading into characters (by character for Chinese, by word for English is more natural), wrap each in an overflow:hidden outer box with an inner span initially at translateY(110%), and after entering the viewport return them in sequence (each delayed 40-70ms, duration 600-800ms, cubic-bezier(.22,1,.36,1)). The overflow:hidden version "rises from below", the opacity version "fades in" — the former is crisper. Split with JS (splitting by DOM without breaking layout) or GSAP SplitText. Keep the total animation duration within 1.2s. Never use it on long paragraphs — per-character animation belongs only to headings.
常见搭配
同一页面里经常和「逐字入场动画」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-textreveal">
<div class="d-textreveal__line">
<span style="--i:0">为</span><span style="--i:1">创</span><span style="--i:2">作</span><span style="--i:3">者</span><span style="--i:4">而</span><span style="--i:5">生</span>
</div>
<span class="d-tiny">每个字符错开 70ms 依次升起</span>
</div>