段階的なtransition-delayによるシーケンシャルアニメーション

transition-delayによる段階的アニメーション

transition-delayプロパティは、トランジションの開始タイミングをオフセットできます。兄弟要素に段階的な遅延を適用することで、カスケードする段階的なアニメーション効果を作成します。

CSSコード

.list-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out,
              transform 0.4s ease-out;
}

.list-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.list-item:nth-child(1) { transition-delay: 0s; }
.list-item:nth-child(2) { transition-delay: 0.05s; }
.list-item:nth-child(3) { transition-delay: 0.1s; }
.list-item:nth-child(4) { transition-delay: 0.15s; }
.list-item:nth-child(5) { transition-delay: 0.2s; }

CSSカスタムプロパティによる動的な遅延

各子要素の遅延をハードコードする代わりに、JavaScriptやインラインスタイルで設定するCSSカスタムプロパティを使用します：

.list-item {
  transition-delay: calc(var(--index) * 0.05s);
}

<li class="list-item" style="--index: 0">最初</li>
<li class="list-item" style="--index: 1">2番目</li>
<li class="list-item" style="--index: 2">3番目</li>

遅延の増分の選択

• 0.03秒〜0.05秒: 速いスタガー — アイテムがほぼ同時に表示されるが、目に見えるウェーブあり
• 0.08秒〜0.12秒: 中程度のスタガー — 明確にシーケンシャル、自然なリズム
• 0.15秒〜0.2秒: 遅いスタガー — ドラマチック、各アイテムにそれぞれの瞬間がある

退出時の逆遅延

アイテムを削除する際は、最後のアイテムが最初に退出するよう遅延順序を逆にします：

.list-item.leaving:nth-child(1) { transition-delay: 0.2s; }
.list-item.leaving:nth-child(2) { transition-delay: 0.15s; }
.list-item.leaving:nth-child(3) { transition-delay: 0.1s; }