学ぶ、考える、書き出す。

background-image はアニメーション出来ない(問題と解決のコード付き)

何が起きたか

http://jsfiddle.net/bo5rj0b5/4/

上記の jsfiddle で CSS の所に書いたように、keyframes に background-image プロパティを指定して、クロスフェード効果で背景画像の表示が切り替わるという動作を期待しました。

Chrome では、期待通りの動作をしたのですが、Firefox と Android Browser ではアニメーションどころか、画像自体が表示されませんでした。

解決

!?

なん…だと…?

というわけで、background-image は仕様的にはアニメーション不可能なプロパティなのですが、Chrome が仕様に準拠していないという事でした。

というわけで、以下のように書き直しました。

クロスフェードされるように書き直したコード

HTML

<div class="test-01">
  <img src="http://lorempixel.com/400/200/cats/1" alt="" />
  <img src="http://lorempixel.com/400/200/cats/2" alt="" />
</div>

CSS

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

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

確認用の jsfiddle はこちら。