CSSでスタッガーアニメーションがつくれる！　sibling-index() / sibling-count()の活用アイデア
BRANK

sibling-index()関数とsibling-count()関数は、兄弟要素の「並び順」や「総数」を整数として返すCSS関数です。数値として使えるので、calc()関数などと組み合わせられます。具体例としてわかりやすいのが、スタッガーアニメーション（要素が順番に遅れて動くアニメーション）です。

ics.media
Related Topics: CSS Web Standards / Browsers
2 comments
  • 池田 泰延
    @clockmaker

    slibling-index()で便利になること：

    ・slibling-index()はcalc()等での計算に用いる
    ・CSSだけで実現しようとすると、次の面倒な手段を用いる必要があった
    ・A案：nth-child(n)等を使って配置（動的な要素数だと上限がわからないため、100個とか余裕をもって無駄にCSS定義が必要だった）