フェードイン

フェードイン

↓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秒後には完全に見えます。

コメント

タイトルとURLをコピーしました