何が起きたか
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;
}
}