CSSでスタッガーアニメーションがつくれる！ sibling-index() / sibling-count()の活用アイデア sibling-index()関数とsibling-count()関数は、兄弟要素の「並び順」や「総数」を整数として返すCSS関数です。数値として使えるので、calc()関数などと組み合わせられます。 具体例としてわかりやすいのが、スタッガーアニメーション（要素が順番に遅れて動くアニメーション）です。これまでCSSでスタッガーアニメーションを実装するには、:nth-child(1)、:nth-child(2)…と個別に指定したり、JavaScriptでインデックスを付与する必要がありました。sibling-index()関数とsibling-count()関数を使えば、これらの手間なく、CSSだけで柔軟なスタイリングが可能になります。 今回はスタッガーアニメーショ
