CSSアニメーションでフェードインを実装する方法と応用テクニック

Webサイトを訪れたときに、要素がふわっと表示されるような演出を見たことはありませんか？それは「フェードイン」と呼ばれるアニメーション効果の一つです。派手すぎず、ユーザーに自然な印象を与えるこの効果は、CSSアニメーションを使えば簡単に実装できます。この記事では、CSSだけでできる基本的なフェードインの書き方から、スクロール連動や遅延付きなどの応用方法まで、初心者にもわかりやすく解説します。

フェードインとは？どんなときに使う？
CSSでフェードインを実装する基本構文
1. 例：基本的なフェードインの書き方
アニメーションに遅延を加える方法
スクロール時にフェードインさせる方法（JavaScript併用）
1. HTMLとCSS
2. JavaScript
応用：複数要素に順番にフェードインを適用する
CSSライブラリを使って簡単にフェードインを導入する
1. Animate.cssを使った例
よくあるトラブルと対処法
1. フェードインが機能しない
実際の制作現場での活用例
まとめ：フェードインは「見せ方」の第一歩

フェードインとは？どんなときに使う？

フェードイン（Fade In）は、透明な状態から徐々に要素が表示されるように見せるアニメーション効果です。
以下のようなシーンでよく利用されます。

ページ読み込み時に画像や見出しを表示する
スクロールしてきたときに要素を目立たせる
モーダルウィンドウやポップアップを自然に表示させる

視覚的に自然で、ユーザーの注意を引きやすいため、Webデザインでは定番の演出方法です。

CSSでフェードインを実装する基本構文

CSSだけでフェードインを行うためには、@keyframesを使ってアニメーションを定義し、opacityプロパティで透明度を変化させます。

例：基本的なフェードインの書き方

<div class="fade-in">こんにちは！</div>

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

opacity: 0; で初期状態を透明にします。
animation プロパティでアニメーション名と時間、動きの種類（イージング）を指定。
forwards をつけることでアニメーション終了後もその状態（表示された状態）を維持できます。

アニメーションに遅延を加える方法

フェードインを少し遅らせて表示したい場合は、animation-delay プロパティを使います。

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
  animation-delay: 1s;
}

例えば、ページ内の複数の要素を順番に表示させたいときに便利です。

スクロール時にフェードインさせる方法（JavaScript併用）

CSSだけではスクロール連動のフェードインは実現できないため、JavaScriptと組み合わせて使います。

HTMLとCSS

<div class="scroll-fade-in">スクロールで表示されます！</div>

cssコピーする編集する.scroll-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease-out;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

const elements = document.querySelectorAll('.scroll-fade-in');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

elements.forEach(el => observer.observe(el));

これにより、要素が画面に入ったタイミングでvisibleクラスが追加され、CSSのトランジションでフェードイン効果が実行されます。

応用：複数要素に順番にフェードインを適用する

リスト項目やギャラリーの画像を、1つずつ順番にフェードインさせるには、アニメーションの遅延を個別に設定します。

<ul>
  <li class="fade-in delay-1">Item 1</li>
  <li class="fade-in delay-2">Item 2</li>
  <li class="fade-in delay-3">Item 3</li>
</ul>

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.delay-1 {
  animation-delay: 0.3s;
}
.delay-2 {
  animation-delay: 0.6s;
}
.delay-3 {
  animation-delay: 0.9s;
}

これにより、視覚的に心地よい連続表示が可能になります。

CSSライブラリを使って簡単にフェードインを導入する

自分でアニメーションを書くのが面倒な方には、CSSアニメーションライブラリの使用もおすすめです。代表的なものに「Animate.css」があります。

Animate.cssを使った例

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<div class="animate__animated animate__fadeIn">アニメーション付き！</div>