Webサイトにアニメーションを取り入れることで、ユーザーの注目を引き、印象に残るデザインが可能になります。その中でも「フェードイン」は、最もよく使われるアニメーション効果のひとつです。ページを開いたときにテキストや画像がふわっと表示されるだけで、サイト全体の雰囲気が洗練されて見えます。本記事では、CSSだけで実装できるフェードイン効果の使い方を、実例を交えながら丁寧に解説します。アニメーション初心者の方でもすぐに取り入れられる内容になっていますので、ぜひご活用ください。
フェードインとは、要素の透明度（opacity）を変化させて、徐々に表示させるアニメーション効果です。たとえば、ページを開いたときにテキストや画像がふわっと現れるような演出は、このフェードインによって実現されます。
CSSでは、JavaScriptを使わなくてもシンプルなアニメーションが可能で、「@keyframes」と「animation」プロパティを使って実装できます。フェードインもその代表例です。
まずは、最もシンプルなフェードインのコードから紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.fade-in {
opacity: 0;
animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="fade-in">
<h1>ようこそ、私たちのサイトへ！</h1>
</div>
</body>
</html>
このコードでは、.fade-inクラスを付けた要素が2秒かけて表示されるように設定されています。
opacity: 0 … 初期状態で透明animation: fadeIn 2s ease-in forwards … アニメーションの名前・時間・イージング・最終状態を維持@keyframes fadeIn … アニメーション内容の定義（透明から表示へ）要素が画面内に入ったタイミングでフェードインさせたいときには、JavaScriptを組み合わせると便利です。以下のように実装できます。
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 1s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<div class="fade-in">スクロールで表示される要素</div>
<script>
const elements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
elements.forEach(el => observer.observe(el));
</script>
この方法では、Intersection Observer API を使って要素が画面に入ったタイミングを検出しています。
複数の要素を時間差でフェードインさせたい場合は、アニメーションに animation-delay を加えます。
<style>
.fade-in-seq {
opacity: 0;
animation: fadeIn 1s ease forwards;
}
.delay-1 {
animation-delay: 0.5s;
}
.delay-2 {
animation-delay: 1s;
}
.delay-3 {
animation-delay: 1.5s;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
<div class="fade-in-seq delay-1">1つ目の要素</div>
<div class="fade-in-seq delay-2">2つ目の要素</div>
<div class="fade-in-seq delay-3">3つ目の要素</div>
このようにすれば、ユーザーの注目を段階的に誘導できる視覚効果が得られます。
フェードインに他のCSSプロパティを加えることで、より魅力的なアニメーションが可能になります。例えば、ズームやスライドを加えた演出です。
cssコピーする編集する@keyframes fadeZoom {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fade-zoom {
opacity: 0;
animation: fadeZoom 0.8s ease-out forwards;
}
このようにスケール（拡大・縮小）と透明度を組み合わせることで、よりリッチな動きになります。
実装が増えてくると、CSSが複雑になってしまうことがあります。そんなときは、共通のアニメーションクラスを作っておくと便利です。
cssコピーする編集する.fade-in-common {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
HTML上でクラスを切り替えるだけで、同じアニメーションを様々な場面で使い回せます。
フェードインは以下のような場面で特に効果的です。
フェードインは強すぎず自然なアニメーションなので、ユーザー体験を損なうことなく、デザイン性を向上できます。
CSSアニメーションによるフェードインは、シンプルながら効果的な演出が可能で、Webサイトに動きを加える第一歩として非常におすすめです。基本の使い方から応用までを押さえておけば、さまざまな場面で活用できるでしょう。最初は小さな部分からでも導入して、徐々にアニメーションの表現力を高めてみてください。