🎃

【CSS】背景画像を滑らかに切り替える

2023/07/16に公開

CSS

やりたいこと

指定したタイミングでbackground-imageを滑らかに切り替えたい

実装

<div class="target"></div>

.target {
  /* 切り替え前の画像と切り替え後の画像を設定 */
  background-image: url(../assets/img/before.jpg), url(../assets/img/after.jpg); 
  /* アニメーションを設定 */
  animation: image_anime 1s ease; 
  /* forwardsを設定すると100%の状態で止まる */
  animation-fill-mode: forwards; 
  /* animationを開始する時間を設定 */
  animation-delay: 2s; 
}

@keyframes image_anime {
  100% {
    /* 切り替え後の画像 */
    background-image: url(../assets/img/after.jpg); 
  }
}

ポイント

background-image

画像読み込みのラグのせいで一瞬背景が白くなるのでbackground-imageの2番目に切り替え後の画像を設定しておく
background-imageを複数設定すると重ねて表示されるので1番目に設定した画像の後ろに表示される
もっといい方法ありそうだけどとりあえずこれで対策

animation-fill-mode

animation-fill-mode: forwards;を設定しないとアニメーション終了後に切り替え前の画像に戻ってしまうので注意