スタガー
スタガーはカスケードアニメーションシーケンスを作成します。パターンを選択してプレビュー。
1
2
3
4
5
0ms100ms200ms300ms400ms
仕組み
親要素にdata-anim-staggerを付けて子要素をラップします。data-animを持つ各子要素に遅延が増加します。
<div data-anim-stagger="100ms">
<div data-anim="fadeInUp">0ms delay</div>
<div data-anim="fadeInUp">100ms delay</div>
<div data-anim="fadeInUp">200ms delay</div>
</div>パターン
| パターン | 順序 | 用途 |
|---|---|---|
start | 最初から最後 | リスト、カードグリッド |
end | 最後から最初 | 逆順表示 |
center | 中央から端 | ヒーローセクション |
edges | 端から中央 | 対称レイアウト |