Tracking In (字距收拢进入)
别称 Text Tracking In, Letter-spacing In
字母起初间距很宽且较淡，随后在显现的同时收拢到正常字距。
适用场景
标题文字入场
变体
- expand
- contract
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“字距收拢进入”(Tracking In)文字动画，也叫 text tracking in 或 letter-spacing in。
字母起初间距很宽且较淡，然后逐渐收拢到正常字距并完全显现：平滑，末尾减速。
字距变化期间让文字保持居中且不换行，避免周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正常字距显示。相似的动效
ABCD
Blur In (模糊进入)
别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。
适用场景
标题和首屏文字的显现
在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。ABCDEF
Split Text Stagger (拆分文字交错)
别称 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
标题被拆分成字符、单词或行，以短暂延迟依次动画入场。
适用场景
大标题、章节标题
在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果，也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母，字母之间留出短暂延迟，依次上移并淡入，快速顺滑，不要有弹跳感。
标题进入视口时只播放一次，让屏幕阅读器把它当作一个完整的词读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。ABCDEF
将鼠标悬停在上面
Letter Scatter (文字飞散)
别称 Explosive Letter Burst, Scatter Gather Letters
悬停时字母四散飞开再归位，或在入场时向外迸散。
适用场景
俏皮的链接
在[应用位置]添加“文字飞散”(Letter Scatter)悬停效果，也叫 scatter gather letters 或 explosive letter burst。
指针移到文字上时，每个字母带着一点旋转朝各自方向飞出一小段；指针移开后再顺滑地聚拢回原来的单词。
字母移动时，单词在布局中占的位置保持不变，屏幕阅读器要把它当作一个词来读；键盘聚焦时也显示同样的效果。ABCDEF
将鼠标悬停在上面
Variable Font Weight Animation (可变字重动画)
别称 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
借助可变字体的轴，字母平滑地变粗或变细（或改变宽度、倾斜度）。
适用场景
交互式标题
在[应用位置]添加“可变字重动画”(Variable Font Weight Animation)悬停效果，也叫字重切换(font weight shift)。
指针停在文字上时，字母从左到右依次变粗，形成一道流畅的波浪；指针移开后再变细。
使用可变字体，让字重平滑变化而不是跳变；标题变宽时不要挤动附近内容，并且在键盘聚焦时呈现同样的效果。Entrance & Exit 中的其他动效
A
Zoom In (缩放进入)
别称 Scale In, Zoom In Up, Zoom In Down
元素从小而透明的状态放大到完整尺寸，同时淡入。
适用场景
模态框、图片灯箱、弹出层
在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。A
Zoom Out (缩放退出)
别称 Scale Out
元素缩小并淡出，直至消失。
适用场景
关闭模态框和移除条目
在[应用位置]添加“缩放退出”(Zoom Out)退场动画，也叫 scale out。
元素朝中心缩小并淡出，直至消失：快速，逐渐加速。
完全消失后再从布局和键盘焦点中移除；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
Back In (回弹进入)
别称 Back In Up, Back In Down
元素从缩小并偏移的状态开始，滑入后放大到完整尺寸。
适用场景
首屏主视觉元素和卡片
在[应用位置]添加“回弹进入”(Back In)入场动画，也叫 back in up 或 back in down。
元素以缩小且略微透明的状态从边缘外进入，到达位置后再放大到完整尺寸：一个刻意的两段式动作，而不是快速弹出。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。