MOTION EFFECT
逐条入场列表Animated List
新条目从上方滑入、旧条目向下淡出，循环往复。Magic UI 的 Animated List，首屏「实时动态」区块的标准做法。
效果预览
李
新订单 #20482 秒前
王
用户完成注册8 秒前
赵
触发自动部署14 秒前
适合用在哪
首页展示实时通知/订单/用户动态，用一个组件撑起「产品正在被使用」的佐证。
容易踩的坑
- 用假数据伪装实时订单会被用户识破，反而损害信任与合规。
- 新条目插入时列表高度跳变，会把下方内容整体推动造成布局偏移。
- 每 3 秒入场一条并用 aria-live 播报，读屏用户会被持续打断。
设计提示词 · Prompt
逐条入场列表（Animated List）：纵向 flex 列表，gap 6px，每条是一张白底细描边的圆角小卡（内边距 6-8px），左边一个头像或图标位，右侧两行文字（10px 加粗标题 + 8.5px 浅灰时间）。每条初始 opacity:0，动画 3.6s ease-out 无限循环：从 translateY(-11px) scale(.95) 到原位（14% 处），保持到 72% 再向下淡出。三条的 animation-delay 依次错开 0.28s，形成持续滚动的动态流。真实实现用 JS 定时 unshift 新数据并在超长后裁剪。
Animated List: a vertical flex list with gap 6px; each item is a small white rounded card with a thin border (6-8px padding), an avatar or icon slot on the left, and two lines of text on the right (10px bold title + 8.5px light gray time). Each item starts at opacity:0 and animates 3.6s ease-out, infinite: from translateY(-11px) scale(.95) to its resting position (at 14%), holds until 72%, then fades out downward. Stagger the three items' animation-delay by 0.28s each to form a continuously scrolling live feed. A real implementation uses JS to unshift new data on a timer and trims the list when it gets too long.
常见搭配
同一页面里经常和「逐条入场列表」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-alist">
<div class="m-alist__i"><span class="d-av d-av--sm">李</span><div><b>新订单 #2048</b><span>2 秒前</span></div></div>
<div class="m-alist__i"><span class="d-av d-av--sm" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">王</span><div><b>用户完成注册</b><span>8 秒前</span></div></div>
<div class="m-alist__i"><span class="d-av d-av--sm" style="background:linear-gradient(135deg,#06b6d4,#4f46e5)">赵</span><div><b>触发自动部署</b><span>14 秒前</span></div></div>
</div>
</div>