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

学習し、自分なりに噛み砕いて、書き出すブログ。

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

記事を共有する

関連記事

  1. ブログ記事を投稿するためのフォームを作った

    はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

  2. ブログを国際化対応した

    当ブログのUIで使う文言を国際化対応しました。

  3. AVA上でsinon.useFakeTimers()を複数のテスト内で実行するとエラーが出る

    最近Sinon.JSのバージョンをv14.0.0に上げたときに、エラーが出てテスト実行が失敗するようになりました。

  4. 自分がアクセシビリティ向上に力を入れる理由

    いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています(アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 | 事例紹介 | 株式会社コンセント で少し触れられています)。