动画 · 入场与退场 · 10

错落入场

错落入场 = 列表各项依次延迟淡入上移，把一整块内容变成可被阅读的节奏。

First
First
First

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Stagger a list: each item fades and rises 24px with a 0.1s nth-child delay, 0.5s each, transform and opacity only.

Cut the rise to 10px and the delay to 0.06s for a tighter, snappier cascade.

Drive the stagger from a CSS custom property per item (--i) so the delay is data-driven, observe the list once on scroll-in, and under prefers-reduced-motion render every row at rest. Keep total time under 1s.

修改类 Prompt 只动目标，不碰页面其余部分。

错落入场是什么？

错落给列表一个节拍。每行在前一行之后淡入并上移一毫，眼睛被顺着引向下方，而不是撞上一面文字墙。每项延迟约 0.1s、总时长控制在 1 秒内，否则列表显得反应慢。

动画标本

触发: inview
技术: css
时长: 2.6s
缓动: cubic-bezier(0.16, 1, 0.3, 1)
性能: transform, opacity

什么时候用

Feature lists, nav menus, result rows
Any group of items that should read top to bottom

什么时候别用

Very long lists — a long cascade feels slow
When items must be scannable instantly (dashboards)

Keep total stagger under a second; beyond that the list feels like it is loading.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.stagger { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: min(220px, 100%); }
.stagger .anim-el {
  animation-name: fadeUp;
  animation-duration: var(--anim-duration, 2.6s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink, #1a1c22);
}
.stagger .anim-el:nth-child(2) { animation-delay: 0.14s; }
.stagger .anim-el:nth-child(3) { animation-delay: 0.28s; }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(26px); }
  30%, 100% { opacity: 1; transform: translateY(0); }
}

<ul class="stagger">
  <li class="anim-el">First</li>
  <li class="anim-el">Second</li>
  <li class="anim-el">Third</li>
</ul>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

极简→

主题

AI SaaS 落地页→

组件

卡片→

错落入场

错落入场是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

错落入场

错落入场是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本