动效与动画

错落渐入 Stagger Reveal

一组元素以固定间隔依次入场,形成有节奏的波浪式浮现

卡片进入视野后依次浮现()
1
2
3
4
5
6

**错落渐入(Stagger Reveal)**是一组同类元素不做“同时出现”,而是以固定间隔(通常 80~120ms)一个个依次入场,整体看像一道波浪扫过。它是“同时 fadeIn”的高级版——节奏感就是高级感的来源。

什么时候用:卡片墙、导航菜单项、数据仪表盘的首屏。凡是三个以上元素同时进场,都可以考虑错落。超过 8~10 个元素时后面的间隔要递减,否则等得心焦。

对 AI 说清楚的三要素:① 单元素动画(淡入 + 上移 2030px 是安全组合);② 相邻间隔(80120ms);③ 触发时机(进入视口时启动,而不是页面加载时——保证用户看得到)。

复制即用的提示词片段

卡片组进入视口时错落渐入(Stagger Reveal):每张卡片先
opacity 0→1 + translateY 24px→0(0.5s,cubic-bezier(0.22,1,0.36,1)),
相邻卡片间隔 90ms 依次触发,由 IntersectionObserver 进入视口 30% 时启动。