CSS

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

More than 3 years have passed since last update.


何が起きたか

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はこちら。