【CSS】アニメーションでフェードイン・スライドインを実装する方法

Webサイトで動きを加えるときに最もよく使われる表現のひとつがフェードインやスライドインです。CSSアニメーションを使えば、JavaScriptに頼らず軽量に実装できます。ここでは基本の書き方から実用的な応用例までを紹介します。

フェードインの基本

透明度を制御するopacityを利用すれば簡単にフェードインを表現できます。初期状態を非表示（opacity: 0）にして、アニメーションで1まで変化させます。

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

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

要素にクラス.fade-inを付与すれば、ページ読み込み時に1秒かけてフェードインします。

スライドインの基本

transform: translateを使って要素を外側から移動させ、同時に透明度を変化させると自然なスライドインになります。

.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: slideInLeft 0.8s ease forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

同様に、右・下・上からのスライドインもtranslateXやtranslateYを変えるだけで実現できます。

遅延アニメーションで順番に表示

複数要素をリスト表示する場合、animation-delayを使うと1つずつ時間差で出現させることができます。

.list-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0.2s; }
.list-item:nth-child(2) { animation-delay: 0.4s; }
.list-item:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

スクロール連動で発火する仕組み

CSSだけではアニメーションがページ読み込み時にしか発火しません。スクロールに合わせたい場合はJavaScriptでclassを追加するのが一般的です。IntersectionObserverを組み合わせれば軽量に実現できます。

<script>
const targets = document.querySelectorAll('.fade-in, .slide-in-left');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
      observer.unobserve(entry.target);
    }
  });
});
targets.forEach(el => observer.observe(el));
</script>

/* CSSで.activeにアニメーションを設定 */
.fade-in,
.slide-in-left {
  opacity: 0;
  transform: translateY(20px);
}
.fade-in.active {
  animation: fadeIn 1s ease forwards;
}
.slide-in-left.active {
  animation: slideInLeft 0.8s ease forwards;
}

まとめ

フェードインやスライドインはopacityとtransformを組み合わせることでシンプルに実装できます。animation-delayで演出を工夫したり、JavaScriptと併用してスクロールに応じて発火させれば、よりリッチな表現が可能です。CSSアニメーションを活用して、ユーザーにとって自然で心地よい動きを演出しましょう。