私はこの解決策を見つけましたUsing CSS for fade-in effect on page loadそして、方法2を生のJavaScriptで使用しました。それはhttps://skidle.github.io/projects/weatherロードフェードがうまくいかない
を動作しません。また、このテキストがで消されているウェブサイトにここに私のコードサンプルがあります
はJavaScript
var fadeOnLoad = function() {
document.getElementById("wrapper").className += "load";
};
fadeOnLoad();
CSS
#wrapper {
opacity: 0;
transition: opacity 2s ease-in;
}
.load {
opacity: 1;
}
リンクGoogle Devツール 
opacity: 1 !important;
IDセレクタここクラス
より高い優先度を有する定義しようとするには、クリア処理ロジックとスニペットです。ボディがロードされるまで要素は見えません。すぐにイベントのボディのonloadが解雇として、要素は良いプラクティスとしてopacity: 1;
function fadeOnLoad() {
document.getElementById("wrapper").className = "";
};#wrapper {
transition: opacity 2s ease-in;
}
.not_loaded {
opacity: 0;
}<body onload="fadeOnLoad()">
<div id="wrapper" class="not_loaded">text</div>
</body>より高いか、セレクタを修正してください： '＃wrapper.load {opacity：1;}' – scraaappy
クラス属性に重要な要素を追加します。
.load{
opcacity: 1 !important; //because you have id selector with opacity to 0.
}
を取得し、はスタイリングのIDを使用しないようにしてみてください。
代わりの#wrapperセレクタの遷移を定義するので、同様にtransitionプロパティを含むクラスを作成する：
.opacity-transition {
transition: opacity 2s ease-in;
}
遷移が終了すると、このクラスはそれ以上必要とされないであろうとすることができます除去された。
最初に#wrapper要素を非表示にする別のクラスを作成します。このクラスが削除されると、トランジションが開始されます。
.hidden {
opacity: 0;
}
コードスニペット：
function fadeOnLoad() {
//Cache the selector.
var wrapper = document.getElementById("wrapper");
console.log(wrapper.className);
//Add event listener for transition end.
wrapper.addEventListener("transitionend", function() {
//Remove the class which is not needed anymore.
this.classList.remove("opacity-transition");
console.log(this.className);
});
//Remove hidden class to start the transition.
wrapper.classList.remove("hidden");
};.opacity-transition {
transition: opacity 2s ease-in;
}
.hidden {
opacity: 0;
}<body onload="fadeOnLoad()">
<div id="wrapper" class="opacity-transition hidden">
text</div>
</body>
'不透明度：1重要;'？ idセレクタの優先度がクラス – Banzay