sibling-index() で nth-child 地獄なしのスタッガーアニメーション

どんな時に使う？

リスト項目を1つずつ時間差で表示する「スタッガー」演出。従来は :nth-child(1)〜(n) ごとに delay を書くか、JS/インラインで --i を振っていたため、項目が増えると遅延が付かない問題があった。

コード

li {
  animation: rise 0.5s ease-out both;
  /* 自分が兄弟の中で何番目か（1始まり）× 100ms */
  animation-delay: calc(sibling-index() * 100ms);
}

@keyframes rise {
  from { opacity: 0; translate: 0 12px; }
}

• 兄弟の総数を返す sibling-count() と組み合わせると、逆順や中央から広がる演出も作れる。

注意点・対応状況

• sibling-index() / sibling-count() は新しい関数で、現時点では Chromium 系が先行。未対応ブラウザ向けには --i をインラインで振るフォールバックか、遅延なしで表示されることを許容する。
• 項目数が多いと最後の遅延が長くなりすぎるので min() で上限を付ける（例: min(sibling-index() * 100ms, 1s)）。

出典

• @aviralj02 · 2026-09-26