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

f:id:media-gatch:20181107171622p:plain

どうもー・ω・ガッチ(@MediaGatch)です。

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

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

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

記事の内容はこちら

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

f:id:media-gatch:20181107172007p:plain

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

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

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

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

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

<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>

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

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

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

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

<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>


わからない部分があったら、ガッチまで遠慮なく連絡ください。

twitterはこちら → @MediaGatch