Stagger Reveal
逐项浮现
Aliases:逐项浮现列表交错出现依次淡入逐个加载出现瀑布式出现
What is it
Instead of appearing at once, a group of items enters one after another at a fixed interval — like roll call. A 40–120ms gap lets a list wake up in order: livelier than a single fade, less impatient than true sequential loading.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Lists, card grids and nav items entering the viewport
- Grouped content inside overlays — menus, notification lists
- Emphasising order across a batch of results
✕ When not to use
- Long lists — past ~15 items the tail waits too long
- High-frequency workflows where every delay is a cost
- Over-long gaps — beyond 150ms it turns theatrical
Variants
Fade-up
淡入上浮
translateY + opacity per item — the universal default
Scale-in
缩放浮现
Grows from 0.96 to 1 — extra card presence
Slide-in
侧向滑入
Slides in from one side — menu favourite
Implementation
animation-delay: calc(index * 60ms)@keyframes fade-upopacity 0 → 1animation-fill-mode: bothShare one set of keyframes across items and only stagger animation-delay by index (index × 40–120ms), always with animation-fill-mode: both so items stay hidden during their delay. Multiply both delay and duration by the speed factor. With prefers-reduced-motion show everything at once.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a staggered entrance to the project's list pages. Check existing entrance animations and scroll-trigger logic first; stay consistent. Requirements: - Shared keyframes, stagger via animation-delay only (40–120ms) - fill-mode both to prevent flashes during delays - Trigger once in view; respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
Elements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionSimilarReveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
MotionSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsApplies toA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsApplies to