22 CSS Transition Effects 18 / 22

Staggered List Animation

Sequential entrance for tasks (slide left), feature cards (scale up), navigation menu (slide right) and data table rows (fade up) with replay controls.

CSS + JS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="page">
  <h1>Staggered List Animation</h1>
  <p class="subtitle">Sequential entrance animations for lists, cards & rows</p>

  <!-- 1. Task list -->
  <section>
    <h2>Task List — Slide from Left</h2>
    <button class="trigger-btn" onclick="replayTasks()">↺ Replay</button>
    <ul class="task-list" id="taskList">
      <li class="task-item done"><span class="task-cb"></span><span class="task-label">Set up CI/CD pipeline</span><span class="task-badge badge-high">High</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Design system token audit</span><span class="task-badge badge-high">High</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Write API documentation</span><span class="task-badge badge-mid">Mid</span></li>
      <li class="task-item done"><span class="task-cb"></span><span class="task-label">Migrate legacy endpoints</span><span class="task-badge badge-mid">Mid</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Lighthouse performance audit</span><span class="task-badge badge-low">Low</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Update onboarding guide</span><span class="task-badge badge-low">Low</span></li>
    </ul>
  </section>

  <!-- 2. Feature cards -->
  <section>
    <h2>Feature Cards — Scale Up</h2>
    <button class="trigger-btn" onclick="replayCards()">↺ Replay</button>
    <div class="feat-grid" id="featGrid">
      <div class="feat-card"><div class="feat-icon">🚀</div><div class="feat-title">Instant Deploy</div><div class="feat-desc">Push to production in under 30 seconds.</div></div>
      <div class="feat-card"><div class="feat-icon">🔍</div><div class="feat-title">Smart Search</div><div class="feat-desc">Full-text search across all your content.</div></div>
      <div class="feat-card"><div class="feat-icon">📊</div><div class="feat-title">Analytics</div><div class="feat-desc">Real-time insights and custom dashboards.</div></div>
      <div class="feat-card"><div class="feat-icon">🤝</div><div class="feat-title">Collaboration</div><div class="feat-desc">Work together with your team in real time.</div></div>
      <div class="feat-card"><div class="feat-icon">🛡️</div><div class="feat-title">Security</div><div class="feat-desc">Enterprise-grade protection built in.</div></div>
      <div class="feat-card"><div class="feat-icon">🌍</div><div class="feat-title">Global CDN</div><div class="feat-desc">Serve from 180+ edge locations worldwide.</div></div>
    </div>
  </section>

  <!-- 3. Menu -->
  <section>
    <h2>Navigation Menu — Slide from Right</h2>
    <button class="trigger-btn" onclick="replayMenu()">↺ Replay</button>
    <ul class="menu-list" id="menuList">
      <li class="menu-item active"><div class="menu-icon mi-blue">🏠</div><div class="menu-text"><strong>Dashboard</strong><span>Overview & stats</span></div></li>
      <li class="menu-item"><div class="menu-icon mi-green">📁</div><div class="menu-text"><strong>Projects</strong><span>All your repos</span></div><span class="menu-badge">4</span></li>
      <li class="menu-item"><div class="menu-icon mi-purple">💬</div><div class="menu-text"><strong>Messages</strong><span>Team conversations</span></div><span class="menu-badge">12</span></li>
      <li class="menu-item"><div class="menu-icon mi-orange">🔔</div><div class="menu-text"><strong>Notifications</strong><span>Alerts & updates</span></div></li>
      <li class="menu-item"><div class="menu-icon mi-red">⚙️</div><div class="menu-text"><strong>Settings</strong><span>Account & preferences</span></div></li>
    </ul>
  </section>

  <!-- 4. Table -->
  <section>
    <h2>Data Table — Rows Fade Up</h2>
    <button class="trigger-btn" onclick="replayTable()">↺ Replay</button>
    <table class="data-table">
      <thead><tr><th>Service</th><th>Status</th><th>Uptime</th><th>Latency</th></tr></thead>
      <tbody id="tableBody">
        <tr><td>API Gateway</td><td><span class="status-dot dot-green"></span>Operational</td><td>99.98%</td><td>12ms</td></tr>
        <tr><td>Auth Service</td><td><span class="status-dot dot-green"></span>Operational</td><td>99.95%</td><td>18ms</td></tr>
        <tr><td>Storage CDN</td><td><span class="status-dot dot-yellow"></span>Degraded</td><td>99.41%</td><td>84ms</td></tr>
        <tr><td>Database</td><td><span class="status-dot dot-green"></span>Operational</td><td>100%</td><td>4ms</td></tr>
        <tr><td>Queue Worker</td><td><span class="status-dot dot-red"></span>Outage</td><td>97.12%</td><td>—</td></tr>
      </tbody>
    </table>
  </section>
</div>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; }

.page { padding: 60px 40px; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; color: #fff; }
.subtitle { color: #8b949e; text-align: center; margin-bottom: 50px; }
section { margin-bottom: 64px; }
section > h2 { color: #58a6ff; font-size: .75rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid #21262d; }

/* ─── Trigger button ─── */
.trigger-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 8px; border: 1px solid #30363d;
  background: #161b22; color: #c9d1d9; font-size: .875rem; cursor: pointer;
  transition: background .2s, border-color .2s;
  margin-bottom: 20px;
}
.trigger-btn:hover { background: #21262d; border-color: #58a6ff; }

/* ─────────────────────────────────────
   1. Slide-in task list
───────────────────────────────────── */
.task-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.task-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 10px;
  background: #161b22; border: 1px solid #21262d;
  opacity: 0; transform: translateX(-40px);
  transition: opacity .5s ease, transform .5s ease, background .2s, border-color .2s;
}
.task-item.in { opacity: 1; transform: none; }
.task-item:hover { background: #1c2128; border-color: #30363d; }
.task-cb {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #30363d; flex-shrink: 0; cursor: pointer;
  transition: border-color .2s, background .2s;
  display: flex; align-items: center; justify-content: center; font-size: .65rem;
}
.task-item.done .task-cb { background: #238636; border-color: #238636; }
.task-item.done .task-cb::after { content: '✓'; color: #fff; }
.task-item.done .task-label { text-decoration: line-through; color: #484f58; }
.task-label { flex: 1; font-size: .9rem; }
.task-badge {
  font-size: .7rem; padding: 2px 8px; border-radius: 12px; font-weight: 600;
}
.badge-high { background: rgba(248,81,73,.15); color: #f85149; border: 1px solid rgba(248,81,73,.3); }
.badge-mid  { background: rgba(210,153,34,.15); color: #d2a004; border: 1px solid rgba(210,153,34,.3); }
.badge-low  { background: rgba(35,134,54,.15);  color: #3fb950; border: 1px solid rgba(35,134,54,.3); }

/* ─────────────────────────────────────
   2. Feature cards fan-in
───────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.feat-card {
  padding: 24px 20px; border-radius: 12px;
  background: #161b22; border: 1px solid #21262d;
  opacity: 0; transform: translateY(30px) scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  cursor: default;
}
.feat-card.in { opacity: 1; transform: none; }
.feat-card:hover { background: #1c2128; box-shadow: 0 0 0 1px #30363d, 0 8px 24px rgba(0,0,0,.4); }
.feat-icon { font-size: 1.8rem; margin-bottom: 12px; }
.feat-title { color: #e6edf3; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.feat-desc  { color: #8b949e; font-size: .8rem; line-height: 1.5; }

/* ─────────────────────────────────────
   3. Menu items
───────────────────────────────────── */
.menu-list { list-style: none; max-width: 340px; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  opacity: 0; transform: translateX(30px);
  transition: opacity .4s ease, transform .4s ease, background .2s;
  cursor: pointer;
}
.menu-item.in { opacity: 1; transform: none; }
.menu-item:hover { background: rgba(88,166,255,.08); }
.menu-item.active { background: rgba(88,166,255,.12); }
.menu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.mi-blue   { background: rgba(88,166,255,.15); }
.mi-green  { background: rgba(63,185,80,.15); }
.mi-purple { background: rgba(188,140,255,.15); }
.mi-orange { background: rgba(255,166,87,.15); }
.mi-red    { background: rgba(248,81,73,.15); }
.menu-text strong { display: block; font-size: .875rem; color: #e6edf3; }
.menu-text span   { font-size: .75rem; color: #8b949e; }
.menu-badge { margin-left: auto; background: #58a6ff; color: #0d1117; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

/* ─────────────────────────────────────
   4. Table rows
───────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 10px 16px; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: #8b949e; border-bottom: 1px solid #21262d; }
.data-table td { padding: 14px 16px; font-size: .875rem; border-bottom: 1px solid #161b22; }
.data-table tbody tr {
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease, background .15s;
  cursor: default;
}
.data-table tbody tr.in { opacity: 1; transform: none; }
.data-table tbody tr:hover td { background: #161b22; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-green  { background: #3fb950; }
.dot-yellow { background: #d2a004; }
.dot-red    { background: #f85149; }
const DELAY = 80; // ms per item

  function stagger(items, delay = DELAY) {
    items.forEach((el, i) => {
      el.classList.remove('in');
      void el.offsetWidth;
      setTimeout(() => el.classList.add('in'), i * delay);
    });
  }
  function resetAndStagger(items, delay) {
    items.forEach(el => el.classList.remove('in'));
    requestAnimationFrame(() => stagger(items, delay));
  }

  function replayTasks()  { resetAndStagger([...document.querySelectorAll('#taskList .task-item')]); }
  function replayCards()  { resetAndStagger([...document.querySelectorAll('#featGrid .feat-card')], 90); }
  function replayMenu()   { resetAndStagger([...document.querySelectorAll('#menuList .menu-item')], 70); }
  function replayTable()  { resetAndStagger([...document.querySelectorAll('#tableBody tr')], 75); }

  // Auto-run on load
  replayTasks();
  setTimeout(replayCards, 200);
  setTimeout(replayMenu,  400);
  setTimeout(replayTable, 600);

More from 22 CSS Transition Effects

Text Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionBorder Animation TransitionNavigation Hover TransitionUnderline Animation HoverGlassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close TransitionPage Transition Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →