逐项浮现
Stagger Reveal
别名:逐项浮现列表交错出现依次淡入逐个加载出现瀑布式出现
这是什么
一组元素不一起出现，而是按固定间隔依次淡入或上浮，像点名一样逐个到位。 间隔 40～120ms 即可让列表"有秩序地醒来"， 比整块淡入更有生命感，也比真实逐项加载等待感更低。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 列表、卡片网格、导航项首次进入视口
- 弹层内的成组内容（菜单项、通知列表）
- 强调"一批结果"的整体感与顺序
✕ 不适用场景
- 项数很多（超过 15 项，最后一项等到不耐烦）
- 高频操作界面（延迟即成本）
- 间隔过大（超过 150ms 显得拖沓做作）
常见形式
淡入上浮
Fade-up
每项 translateY + opacity，最通用
缩放浮现
Scale-in
从 0.96 放大到 1，卡片感更强
侧向滑入
Slide-in
从一侧依次滑入，导航菜单常用
实现要点
animation-delay: calc(index * 60ms)@keyframes fade-upopacity 0 → 1animation-fill-mode: both所有项共用同一组 keyframes，仅 animation-delay 按 index 递增（index * 40～120ms）， 必须配 animation-fill-mode: both 让首项在延迟期保持隐藏。 延迟与时长都要乘速度系数。 尊重 prefers-reduced-motion 时全部直接显示。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目列表页添加逐项浮现入场。 先检查现有入场动画与滚动触发逻辑，保持一致。 要求： - 统一 keyframes，仅用 animation-delay 交错（40～120ms） - fill-mode both，避免延迟期闪现 - 进入视口触发一次，尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效相似概念把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件应用于点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件应用于