CSSだけでスタッガーアニメーション ができるsibling-index() を使ってみる

⚠️ 2026年時点では実験的な機能です。最新のChrome/Edge(Canaryまたはフラグ有効時)でのみ動作します。
    非対応ブラウザでは該当スタイルが単純に無視されます。

スタッガーアニメーションとは？

複数の要素を少しずつ時間をずらして順番に動かすアニメーションのことらしいです。

よく見かける動きですが、これに名前が付いていたとは知りませんでした。

💡 Stagger(スタガー)は、「よろめく」「驚かせる」「ずらす(交互に配置する)」という意味を持つ英単語です。文脈によっていくつかの異なる意味で使われます。(Google調べ)

使い方

width: calc(sibling-index() * 50px);

上記のように間隔の値を決めてcalcで計算するだけです。

html

<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

<style>
li {
  background: #000;
  color: #fff;
  width: calc(sibling-index() * 50px);
}
</style>

ちなみにclass指定をするとこんな感じ

  <ul>
    <li class="test">テスト</li>
    <li>テスト</li>
    <li class="test">テスト</li>
    <li>テスト</li>
    <li>テスト</li>
  </ul>

お恥ずかしい話、今までは以下のようなかなり原始的な方法で実装していました。sibling-index() を知って、かなり便利だなと感じています(従来でも他にいい方法はあったと思いますが…)。

css

li:nth-child(1) {
  width: 50px;
}
li:nth-child(2) {
  width: 100px;
}
li:nth-child(3) {
  width: 150px;
}

実装

実際によく使いそうな例を用意しました。参考程度にご確認ください。

リスト型

カードグリッドのポップイン

番号付きステップ(擬似要素の連番)