More than 3 years have passed since last update.

【CSS】ロード時にページ全体をフェードインしたい

Posted at 2020-11-26

私の備忘録です。
まだまだ初心者の私ですが、
ポートフォリオの野暮ったさが少しでも無くなるかもしれないフロント実装の一つとして
ロード時にページ全体を、真っ白な画面から徐々に再生させる（フェードインさせる）という実装をしました。

##ロード時にページ全体をフェードインしたい
単純に、以下のコードをCSSファイルに追記です。

index.css

 1 .all {
 2   animation: fade 3s;
 3 }
 4 
 5 @keyframes fade {
 6   0% {opacity: 0;
 7   }
 8   100% {opacity: 1;
 9   }
10 }

##個別の解説

###「fade」キーフレームを.all（<body>でも可）に適用し、3秒で再生するように指定。
※再生するまでの秒数はお好みで！

index.css

 1 .all {
 2   animation: fade 3s;
 3 }

###「fade」キーフレームの設定。

index.css


 5 @keyframes fade {

10 }

###始点（0%）の不透明度opacityを「0」に指定。

index.css

 6   0% {opacity: 0;
 7   }

###終点（100%）の不透明度opacityを「1」に指定。

index.css

 8   100% {opacity: 1;
 9   }