Stagger
スタガー
どんな動き？
リストやカードなど複数の要素が、同時にではなく少しずつ時間差をつけて順番にフェードアップしていくアニメーション。1つずつ登場していく様子がリズムを生み、単調になりがちな一覧表示に軽やかな印象を加える。カードグリッドやナビゲーション、リスト項目の登場演出に非常によく使われる定番テクニック。
よく使う場所
カードグリッドナビゲーションリストギャラリー
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fade up multiple elements one after another with a slight delay between each.Trigger:
When the group enters the viewport (Intersection Observer).
Initial state:
Each item: opacity: 0, translateY: 24px
Animation:
Each item fades up in sequence, offset by a small delay per item (stagger).
Final state:
Each item: opacity: 1, translateY: 0
Timing:
duration: 0.5s per item
stagger delay: 0.12s between items
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (nth-child delay)Intersection ObserverGSAP (stagger)
別名・関連ワード
Staggered AnimationSequential Reveal