フェードイン

↓HTML

<div class="fadeIn">
  <p>フェードイン</p>
</div>

↓CSS

 .fadeIn { 
    animation-name: fadeInAnime; 
    animation-duration:3s; 
    animation-fill-mode:forwards; 
    opacity: 0; 
  }

  @keyframes fadeInAnime{
    0% {
      opacity: 0; 
    }

    100% { 
      opacity: 1; 
    } 
  }

説明

このコードは、ウェブページの一部がゆっくりと見えるようにするためのもので
これを「フェードイン」と言い、アニメーションと呼ばれる。

1. fadeIn
   このアニメーションを適用したいウェブページの部分につける名前（クラス名）です。
2. animation-name: fadeInAnime;
   これから作成するアニメーションの名前を指定します。この場合、名前は fadeInAnimeです。
3. animation-duration: 5s;
   アニメーションが何秒間で起こるかを設定します。この場合、アニメーションは5秒間で行われます。
4. animation-fill-mode: forwards;
   アニメーションが終わった後でも、終了時の状態を保持するように指定します。
5. opacity: 0;
   始まりの透明度を設定します。0は完全に透明、つまり見えない状態を意味します。
6. opacity: 1;
   終わりの透明度を設定します。1は不透明、つまり見える状態を意味します。

次に、@keyframes fadeInAnime {...}の部分は、実際のアニメーションの動きを指定します。

1. 0% {
opacity: 0;
}
   アニメーションの開始時点で、要素が完全に透明（見えない）状態であることを指定します。
2. 100% {
opacity: 1;
}
   アニメーションが完全に終わると、要素が完全に不透明（見える）状態であることを指定します。

結果として、このコードが適用された部分は5秒間でゆっくりと見えるようになります。
最初は透明で見えませんが、時間とともに少しずつ見えるようになり、5秒後には完全に見えます。