交错出现 · Stagger
英文：Stagger
动效与交互难度：入门 ★
🗣️一句话大白话
一组元素不是同时出现，而是逐个、带固定间隔地依次入场。列表、网格、卡片墙的"高级感"大多来自交错。同时出现=无趣，交错=有序。告诉 AI"每个卡片间隔 60ms 依次入场、可加轻微位移"就够。交错常配合 fade/slide 使用，并要控制总时长（间隔×数量 ≤ 约 1 秒），否则后面的元素等太久。
🖼️样图参考
🎬真实场景
卡片网格、列表、菜单项、统计数字、功能墙
📮你可以这样说
「【图像模型版】让 [N] 张卡片按网格顺序依次入场：每张间隔 60ms 交错出现，做淡入+轻微上移，总时长控制在 800ms 内。 【HTML/CSS/JS 版】给列表 [N] 项加交错入场：每项 transition-delay = index × 60ms，fade + 向上 12px 位移，缓动 ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：交错=乱序；实际是"有节奏的依次"，间隔要均匀或递进
- ▸间隔过大（>120ms）会拖沓
🚫什么时候别用
- ✗元素少于 3 个
- ✗用户需要立即扫读全部内容（如搜索结果）
🧩常见变体
均匀间隔递进间隔按行/按列交错
💡小贴士
- ✦间隔 40-80ms 最稳，总时长别超过 1 秒
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗