M-01
交错进场
Stagger
一组元素不是同时出现，而是按顺序一个接一个进来。
- 又叫：
- 错峰动画
- 依次出现
- 级联出现
- 逐条入场
- cascading entrance
- staggered animation
- 展厅
- 动效与节奏
- 形态
- 固定舞台
- 播放
- 重播
- 关键词
- 纯 CSS / 合成层动画 / 动效较多 / 可以直接用
M-01形态 固定舞台播放 重播Stagger
参数工作台
复制给 AI
随参数实时更新给这组列表项做交错进场（stagger）动画：每项从下方 16px、opacity 0 进入最终位置，单项时长 420ms，缓动 cubic-bezier(0.22, 1, 0.36, 1)，相邻两项间隔 80ms。只在首次出现时播放一次，用 transform 和 opacity 实现。系统开启「减少动态效果」时直接显示最终状态。
staggered entrance, animation-delay: index * 80ms, each item fades in with opacity 0 → 1 and translateY(16px) → 0, duration 420ms, easing cubic-bezier(0.22, 1, 0.36, 1), play once on first view, animate transform/opacity only, respect prefers-reduced-motion
https://publieople.github.io/design-museum/entry/stagger/?stage=light
链接带着你调好的参数
什么时候用
- 列表、卡片组、导航项首次出现时，想让视线按顺序扫过
- 想让一组元素显得「有编排」而不是「啪一下全出来」
- 页面初次加载，用一次统一的进场序列建立节奏
适用场景：列表 / 页面 / 导航
推荐取值
- 单项时长
- 300–500ms
- 项间隔
- 60–100ms
- 位移距离
- 8–24px
- 缓动
- ease-out / cubic-bezier(0.22, 1, 0.36, 1)
别搞混
和「延迟动画」的区别
单个元素延迟进场只是「晚点出现」；交错进场的重点是项与项之间的固定间隔（stagger），读者能数出顺序。
和「逐个播放的轮播」的区别
轮播会一直循环；交错进场通常只在首次出现时播放一次，之后不再重复。
容易踩的坑
- 间隔超过 120ms、元素又多，最后一项要等很久，页面像卡住
- 列表很长时只给前 8–10 项加间隔，其余直接显示，否则总时长失控
- 不要用 left/top/margin 做位移，用 transform + opacity，才不会触发重排
- 进场动画属于非必要动效，prefers-reduced-motion 下要直接显示最终态
无障碍降级
prefers-reduced-motion: reduce 时不播放位移与淡入，直接以最终状态渲染整组元素。
关键词
- stagger
- animation-delay
- transition-delay
- transform: translateY
- cascading entrance