返回
UI · №32 · SPECIMEN
错峰动画Stagger
一个接一个出来的效果依次出现列表挨个飞入
LIVE SPECIMEN真的能玩，点点看
- 收件箱
- 已加星标
- 草稿箱
- 已发送
先看结论
一组元素按固定间隔依次入场（而非同时出现），强调"这是一组"的整体感。
- 适合
- 列表/卡片集合的首次入场、抽屉里菜单项的展开。
- 不适合
- 高频刷新的列表——每次刷新表演一遍会把用户逼疯。
直接发给 agent
Animate the list items in with a stagger: each item fades up 12px over 250ms ease-out, starting 60ms after the previous one, triggered when the list enters the viewport.已于 2026-07-17 实测通过
技术标注2 项
- web
- animation-delay: calc(var(--i) * 60ms)
- react
- framer-motion: staggerChildren
详细说明
「一个接一个出来」是用户最常描述却最难说清的动效。它的学名 stagger 一说出口，agent 立刻知道你要 delay 递增——连 60ms 这种合理间隔都会替你选好。