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

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

background-imageは仕様上アニメーションを適用できない

CSSで @keyframesbackground-image プロパティを指定してクロスフェード効果で背景画像の表示が切り替わるという動作を実装しようとしました。

実際にChromeでは期待通りの動作をしました。ただFirefoxとAndroid Browserではアニメーションどころか画像自体が表示されずなぜそうなるのか謎でした。

クロスフェードされないコードを確認するためのJSFiddle

そもそもbackground-imageはアニメーション不可能

!?

なん……だと……?

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; }
}

クロスフェードされるコードを確認するためのJSFiddle

記事を共有する

関連記事

  1. Twitterの右側サイドバーを消す

    Twitter のトレンドを見ると、イラつきを覚えるようになりました。そんなにイラつきを覚えるようなら見なければいいし、そもそも Twitter やめろという話はあります。

  2. CSSを破綻させない

    12/3(土)にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。

  3. Nicoのこれまでとこれから

    Bootstrap Advent Calendar 2015 8日目の記事です。

  4. なぜ CSS や Grunt はつらいと言われるのか

    少し主語を大きく書いてしまいましたが、\*.css と gruntfile.js についての話です。