学習し、自分なりに噛み砕いて、書き出すブログ。

background-imageは仕様上アニメーションを適用できない

CSSで @keyframesbackground-image プロパティを指定してクロスフェード効果で背景画像の表示が切り替わるという動作を実装しようとしました。

実際にChromeでは期待通りの動作をしました。ただFirefoxとAndroid Browserではアニメーションどころか画像自体が表示されずなぜそうなるのか謎でした。

クロスフェードされないコードを確認するためのJSFiddle

そもそもbackground-imageはアニメーション不可能

!?

なん……だと……?

background-imageは仕様上アニメーション不可能なプロパティですが、Chromeが仕様に準拠していませんでした。

なので仕様に沿う形で書き直しました。

各ブラウザーでクロスフェードされるように書き直したコード

HTML

<div class="test-01">
  <img src="https://picsum.photos/id/0/400/200" alt="" />
  <img src="https://picsum.photos/id/1/400/200" alt="" />
</div>

CSS

.test-01 {
  position: relative;
}

.test-01 img:first-child {
  position: absolute;
  animation: crossfade 5s linear 0s infinite alternate;
}

@keyframes crossfade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

クロスフェードされるコードを確認するためのJSFiddle