カードを順番に表示する「Stagger Animation」の作り方【CSS / JavaScript】

一覧UIでカードが一気に表示されると、少し味気ない印象になります。

そこで使われるのが Stagger Animation（スタッガーアニメーション） です。

要素を「少しずつ時間差で」表示することで、

• 気持ちいい動きになる
• 視線誘導がしやすくなる
• UIの質感が上がる

といった効果があります。

アニメーションの質をさらに高めたい方は、
「easing / cubic-bezier」もあわせておすすめです。

この記事では、CSSとJavaScriptでの実装方法と、挙動の違いを実験で確認します。

1.Stagger Animationとは？

Stagger Animationとは、

同じアニメーションを時間差で順番に適用する手法

です。

例えばカードが5枚ある場合：

1枚目 → 0ms
2枚目 → 100ms
3枚目 → 200ms
...

というように「delay（遅延）」をずらします。

このような時間制御の考え方は、
「ループ設計」でも詳しく解説しています。

2.実装①：CSSだけでやる方法

ポイント

• animation-delay を使う
• nth-childで順番を制御

サンプルコード

<div class="list">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.card {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.5s ease forwards;
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 100ms; }
.card:nth-child(3) { animation-delay: 200ms; }
.card:nth-child(4) { animation-delay: 300ms; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

3.実装②：JavaScriptで制御する方法

動的なリストや、要素数が変わる場合はJSの方が便利です。

より滑らかな補間処理については、
「Interpolation」で詳しく解説しています。

const cards = document.querySelectorAll('.card');

cards.forEach((el, i) => {
  el.style.animationDelay = `${i * 100}ms`;
});

4.実験：Stagger Animationの違いを体験する（CSS vs JavaScript）

このデモでは、カードが順番に表示される「Stagger Animation」を2つの方法で比較します。

• CSSのanimation-delayで制御する方法
• JavaScriptで時間差を制御する方法

同じように見える動きでも、制御のしやすさや挙動に違いがあります。
ボタンを切り替えながら、それぞれの特徴を体感してみてください。

インタラクション系の動きに興味がある方は、
「Ripple Animation」もおすすめです。

実験の観察ポイント

• CSS：シンプル・軽量・管理しやすい
• JS：柔軟（途中制御・ランダム・逆順など可能）
• delayが大きすぎると「遅いUI」になる

5.まとめ

Stagger Animationは、

• UIを一気にリッチにできる
• 実装コストが低い
• 視線誘導に強い

という、コスパの高いアニメーションです。

まずはCSSで試し、必要になったらJSに拡張するのがおすすめです。

他のUIアニメーションもあわせて学びたい方は：

– Hover Animation
– Ripple Animation