日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は background-image プロパティの疑似アニメーション制御について

background-image プロパティは transition プロパティや animation プロパティ等のアニメーション制御には対応していません。

そこで、自分なりに試行錯誤することで、疑似的なアニメーション制御に成功したので、その方法などを記録していきます。

###方法２：JavaScript の動的制御で２種類の background-image の opacity を同時に操作することで、疑似的なクロスフェードを実装する。

####記述例

HTML

<html>
  <body>
    <div id="background1" class=""></div>
    <div id="background2" class="none"></div>
    <button id="change_screen" class="" type="button">背景変更</button>
  </body>
</html>

CSS

body {
  margin: 0;
}
#background1,
#background2 {
  min-height: 100%;
  min-width: 100%;
  opacity: 1;
  position: fixed;
  transition: all 1s;
  -webkit-transition: all 1s;
}
#background1 {
  background-image: url(背景画像１)
}
#background2 {
  background-image: url(背景画像２)
}
#background1.none,
#background2.none {
  opacity: 0;
}
#change_screen {
  position: relative;
}

javascript

jQuery(document).ready(function(){

  $("#change_screen").click(function(){
    $("#background1").toggleClass("none");
    $("#background2").toggleClass("none");
  });

});

####解説

１・背景画像の表示専用の空の div タグを二種類を用意する。

２・予め片方の div タグにはクラス none を設定し、透過処理の初期設定を行う。

３・背景変更ボタンをクリックすると、toggleClass メソッドでそれぞれの div タグの none クラスが切り替わる。

４・それぞれの div タグの透明度が逆転し、transition プロパティによって、１秒間の間にそれぞれの背景がアニメーションすることで、結果的にクロスフェードする。

今回はこれで以上になります。

あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。