cssでフェードインアニメーションの実装方法[コピペサンプルあり]

2019/02/21

web

どうもー・ω・ガッチ（@gatchsite）です。

WEB サイトにフェードインアニメーションを実装したい。できれば簡単な実装方法が知りたい。そんな方へ向けた内容です。

本記事では、css のみで簡単に実装する方法を紹介します。WEB 制作 8 年のうちで使ったコードも載せていますので、サイト制作にすぐ使用できるはず。ぜひ使ってみてください。

使ってみて良かったら、コメントやシェアしてもらえたらめっちゃ嬉しいです(^^)

記事の内容はこちら

css のフェードインアニメーションサンプル

css だけでフェードインアニメーションするサンプルを５つ載せています。コピペで使用可ですので、気になった方はぜひ使ってくださいね。

フェードインサンプル ① 基本

フェードインの基本形。透明な状態からだんだん表示されていくサンプルです。

下記がデモになります。こちらをクリックして確認できます。

基本のフェードインアニメーション透明 ⇒ 表示

<div class="css-fade1">
  基本のフェードインアニメーション 透明 ⇒ 表示
</div>

<style>
  .css-fade1 {
    // アニメーション設定
    animation-name: fade-in1;
    animation-duration: 4s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

オススメプログラミングスクール

SkillHacks : Rubyを学びたい方。動画教材とLINE@による無制限サポート
TechAcademy : php/wordpressを学びたい方。現役エンジニアのマンツーマン
CodeCamp : Pythonを学びたい方。データサイエンス初級をオンラインで

フェードインサンプル ② 上から

上から下へ移動しながらフェードインするサンプルです。

下記がデモになります。こちらをクリックして確認できます。

上からフェードインアニメーション

<div class="css-fade2">
  上からフェードインアニメーション
</div>

<style>
  .css-fade2 {
    // アニメーション設定
    animation-name: fade-in2;
    animation-duration: 2s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in2 {
    0% {
      opacity: 0;
      transform: translate3d(0, -20px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>

フェードインサンプル ③ 下から

下から上へ移動しながらフェードインするサンプルです。

下記がデモになります。こちらをクリックして確認できます。

下からフェードインアニメーション

<div class="css-fade3">
  下からフェードインアニメーション
</div>

<style>
  .css-fade3 {
    // アニメーション設定
    animation-name: fade-in3;
    animation-duration: 2s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in3 {
    0% {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>

フェードインサンプル ④ 横から

横から移動しながらフェードインするサンプルです。

下記がデモになります。こちらをクリックして確認できます。

横からフェードインアニメーション

<div class="css-fade4">
  横からフェードインアニメーション
</div>

<style>
  .css-fade4 {
    // アニメーション設定
    animation-name: fade-in4;
    animation-duration: 2s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in4 {
    0% {
      opacity: 0;
      transform: translate3d(30px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>

フェードインサンプル ⑤ スクロール

最後は、スクロール時にフェードインするサンプルです。

スクロールに関しては、残念ながら css のみではできないので、javascript を使用します。ごめんなさい m(_ _)m

jQuery などのプラグインの使用せずに使えるコードですのでご安心を。

下記がデモになります。画面をスクロールすると表示され、上に戻ると非表示になります。

スクロールフェードインアニメーション

<div class="css-fade5">
  スクロールフェードインアニメーション
</div>

<style>
  .css-fade5--in {
    // アニメーション設定
    animation-name: fade-in5;
    animation-duration: 1s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 0; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }
  // アニメーション
  @keyframes fade-in5 {
    0% {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    $(window).on({
      scroll: function(e) {
        var startY = document.querySelector('.css-fade5').getBoundingClientRect().top, //表示させたい対象
          windowHeight = window.innerHeight, // ブラウザの高さ
          offset = (windowHeight / 3) * 2 //オフセット 画面の2/3
        // 表示
        if (startY < offset) {
          document.querySelector('.css-fade5').classList.add('css-fade5--in')
          // ブラウザの外になったら消す
        } else if (startY > windowHeight) {
          document.querySelector('.css-fade5').classList.remove('css-fade5--in')
        }
      },
    })
  })
</script>