CSSバックグラウンドマップロード完了後の遷移アニメーション

背景図に直接アニメーション効果を設定すると、ロードが遅すぎて表示が悪くなり、JavaScriptで画像のロード状態を取得できます.次に、背景画像の透明度グラデーションの効果を実現します.
まず、背景アニメーションを追加する要素スタイルを設定します.

main#background {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

は、opacity: 0;により背景ピクチャのロードが完了するまでの要素の状態を非表示にすることで、ロードプロセス時のピクチャカートン

を回避することができる.

は、animation-fill-mode: forwards;によって、アニメーションの完了後に要素が滞在するスタイル、すなわち透明度が1であり、要素の状態が可視である

を設定する.
アニメーションを定義します

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

アニメーションの効果は透明度が0から1

までです.
次にjsによりピクチャのロード状況を取得する

var background = new Image();
background.src = 'https://static.pexels.com/photos/57772/pexels-photo-57772.jpeg';
background.onload = function () {
    console.log('Background load complete!');
    var loadbackground = document.getElementById('background');
    loadbackground.style.backgroundImage = 'url(' + background.src + ')';
    loadbackground.style.animationName = 'fadein';
}

まず、ピクチャオブジェクト

を作成する.

は、srcの属性によりピクチャのリンクアドレス

を設定.

ピクチャオブジェクトにonloadコールバック関数を追加し、ピクチャのロードが完了するとこの関数が呼び出されるので、この関数では要素の遷移アニメーション

を実現する.

は、背景画像を設定する要素

を取得する.

は、styleの属性により、その要素の背景画像およびアニメーション名

を設定する.
以上の設定で背景画像の移行効果を実現できます!
完全なコード:
https://github.com/saynot/y-n-o/blob/master/css-javascript/background-loaded-animation.html
本文は終わりました.読んでくれてありがとう.