animation-delayプロパティに複数の値を設けることはできない？

とある範囲の背景に、複数の画像が動くアニメーションのUIを実装しようとしました。

実装したいUI

背景画像が一個ずつ順番に左から右へスクロールしていき、右端まで到達すると折り返してエンドレスに左右に自動スクロールしていくようなUI

まずは、複数の背景画像と位置をまとめて設定します。

html

<div class="bgAnimation-area"></div>

css

.bgAnimation-area {
  background-image: url("/img1.png"), url("/img2.png"), url("/img3.png");
  background-position: 0 0, 0 200px, 0 400px;
  background-repeat: no-repeat;
  background-size: 160px;
  width: 100vw;
  height: 100vh;
}

次に、background-imageに設定した画像を動かすアニメーションを@keyframesで定義します。

css

.bgAnimation-area {
  background-image: url("/img1.png"), url("/img2.png"), url("/img3.png");
  background-position: 0 0, 0 200px, 0 400px;
  background-repeat: no-repeat;
  background-size: 160px;
  width: 100vw;
  height: 100vh;
+  animation-name: scroll-x;
+  animation-direction: alternate; /* アニメーションを毎回反転させる */
+  animation-duration: 5s; /* 1回のアニメーション周期の時間指定 */
+  animation-timing-function: linear; /* 一定の割合で直線的に再生 */
+  animation-iteration-count: infinite; /* アニメーションを無限に繰り返す */
}

+ @keyframes scroll-x {
+  to {
+    transform: translateX(100%);
+  }
+ }

アニメーションを開始するタイミングを各画像で1秒ずつずらすために、animation-delayプロパティを以下のように記述しました。

.bgAnimation-area {
    /* 他の処理は省略 */
    animation-delay: 0, 1s, 2s;
}

しかし、これではanimation-delayは発火せずでした。
animation-delayプロパティは1つのアニメーションに対して単一の値しか受け付けません。

そのため、各背景画像でそれぞれ異なるanimation-delayの値を設定するには、各背景画像それぞれに個別でcssのアニメーションプロパティを指定する必要があります。

html

<div class="bgAnimation-area1"></div>
<div class="bgAnimation-area2"></div>
<div class="bgAnimation-area3"></div>

css

.bgAnimation-area1 {
  background-image: url('img1.jpg');
  background-position: 0 0;
  animation-delay: 0;
  /* その他のアニメーションプロパティ */
}

.bgAnimation-area2 {
  background-image: url('img2.jpg');
  background-position: 0 50px;
  animation-delay: 1s;
  /* その他のアニメーションプロパティ */
}

.bgAnimation-area3 {
  background-image: url('img3.jpg');
  background-position: 0 100px;
  animation-delay: 2s;
  /* その他のアニメーションプロパティ */
}

まとめ

同じセレクタ内で、背景画像を複数設け、さらにそれらに別々の動きをさせる、なんてケースは稀なので、なかなかてこずってしまいました。

こういった場合は、背景画像じゃなくてタグにした方がアニメーションで動かしやすいかなぁと思います。