Stagger (交错动画)
别称 Staggered Animation, Cascade
一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。
适用场景
列表、网格、导航菜单和搜索结果
变体
- from start
- from center
- from end
- grid
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(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)，则直接显示，不做动画。- A
- B
- C
- D
点击试试
List Item Enter/Exit (列表项进出)
别称 AnimatePresence, TransitionGroup, Animated list
列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。
适用场景
待办清单、通知、购物车商品
在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated list)。
新项先撑开自己的空间，再淡入并滑入；被删除的项先淡出，再收起高度，让相邻项平滑地补上空位。
被删除的项要等退出动画结束后才移除，这样添加或删除项目时列表不会跳动。Fade Up (上浮淡入)
别称 Fade In Up, Reveal on Scroll
元素在淡入的同时向上移动一小段距离，仿佛落到自己的位置上。
适用场景
滚动时出现的章节标题、卡片和图片
在[应用位置]添加“上浮淡入”(Fade Up)入场动画，也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时，一边轻微上移一边淡入：要含蓄、迅速，不要有弹跳感。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。在里面滚动
Scroll-Triggered Animation (滚动触发动画)
别称 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
元素进入或离开视口时，动画播放一次。
适用场景
淡入区块、延迟显现
在[应用位置]添加“滚动触发动画”(Scroll-Triggered Animation)，也叫滚动显现(reveal on scroll)或 animate on scroll。
每个元素进入视口时只播放一次：淡入并向上滑到位，按自己快速顺滑的节奏播放，而不是跟随滚动位置。
脚本加载失败时内容也要可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接显示元素。Entrance & Exit 中的其他动效
A
Swirl In (漩涡进入)
别称 Swirl In Forward
元素从一个点旋转放大，同时淡入。
适用场景
装饰元素或 Logo 入场
在[应用位置]添加“漩涡进入”(Swirl In)入场动画，也叫 swirl in forward。
元素从一个点放大到完整尺寸，同时旋转远超一整圈并淡入：开始很快，落定时逐渐减速。
只对单个元素播放一次，不要用于整组元素；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。ABCD
Tracking In (字距收拢进入)
别称 Text Tracking In, Letter-spacing In
字母起初间距很宽且较淡，随后在显现的同时收拢到正常字距。
适用场景
标题文字入场
在[应用位置]添加“字距收拢进入”(Tracking In)文字动画，也叫 text tracking in 或 letter-spacing in。
字母起初间距很宽且较淡，然后逐渐收拢到正常字距并完全显现：平滑，末尾减速。
字距变化期间让文字保持居中且不换行，避免周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接以正常字距显示。A
Zoom In (缩放进入)
别称 Scale In, Zoom In Up, Zoom In Down
元素从小而透明的状态放大到完整尺寸，同时淡入。
适用场景
模态框、图片灯箱、弹出层
在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。