何が起きたか

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

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

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

解決

@o_ti @kubosho_ background-image はアニメーション不可能なプロパティでだからではないですか？

— xl1blue (@xl1blue) 2015, 1月 15

！？

@kubosho_ @xl1blue ホントだ。Animatable: no だった。http://t.co/JopFQtOO5F

— 越智 (@o_ti) 2015, 1月 15

なん…だと…？

というわけで、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 はこちら。