background-imageは仕様上アニメーションを適用できない
CSSで @keyframes に background-image プロパティを指定してクロスフェード効果で背景画像の表示が切り替わるという動作を実装しようとしました。
実際にChromeでは期待通りの動作をしました。ただFirefoxとAndroid Browserではアニメーションどころか画像自体が表示されずなぜそうなるのか謎でした。
クロスフェードされないコードを確認するためのJSFiddle
そもそもbackground-imageはアニメーション不可能
@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="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;
}
}