この記事にはプロモーションが含まれています。

【コピペOK】フェードイン系アニメーション完全ガイド【6種類の実装方法】

2025-07-13

ケケンタ

CSSでフェードイン効果を実装したい……

ケケンタ

ページ読み込み時に要素をスムーズに表示させたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
フェードイン系アニメーション

をご紹介します。

6種類のフェードイン効果を完全網羅した実装なので、いままさに「アニメーション効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するフェードイン系アニメーション

基本的なフェードイン（シンプルで高パフォーマンス）
スライドイン（上下左右の方向指定可能）
ズームイン（注目を集める効果大）
バウンスイン（楽しい印象を与える）
フリップイン（3D効果で視覚的インパクト大）
スケールイン（変形しながら登場）

特にページ読み込み時の要素表示やスクロール時のアニメーションには、フェードイン系の効果が非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

おすすめ記事

Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション

【コピペOK】基本的なJavaScriptタイプライターの実装【簡単カスタマイズ】

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

フェードイン系アニメーションとは

フェードイン系アニメーションは、要素が画面に登場する際の基本的なアニメーション効果です。ユーザーの注目を集め、ページの視覚的な魅力を向上させる効果的な手法です。

効果的な使用場面

適している場面

ランディングページのメインコンテンツ
ポートフォリオサイトの作品紹介
ブログ記事の見出しや画像
モーダルウィンドウの表示
スクロール時の要素表示

避けるべき場面

頻繁に更新されるコンテンツ
重要な情報の表示（遅延が問題になる場合）
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェードイン	⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライドイン	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズームイン	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
バウンスイン	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
フリップイン	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
スケールイン	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

基本的なフェードイン

① デモ

See the Pen フェードイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードインの特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてフェードインを確認</h1>
</div>

<!-- フェードイン要素 -->
<div class="fade-in-element">
  <h2>フェードイン効果</h2>
  <p>この要素がフェードインで表示されます。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>フェードインが完了</h1>
</div>

特別なHTMLは不要です。通常の要素にCSSクラスを適用するだけでフェードインア二メーションが実行できます。

③ CSS

.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-in-element.show {
  opacity: 1;
  transform: translateY(0);
}

animationではなくtransitionを使用することで、スクロール時の発火制御が可能になります。初期状態では少し下にずらして配置し、表示時に元の位置に移動させます。

④ JavaScript（スクロール発火制御）

// Intersection Observer APIを使用したスクロール発火制御
const observerOptions = {
  threshold: 0.1, // 要素の10%が見えたら発火
  rootMargin: '0px 0px -50px 0px' // 下から50px手前で発火
};

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

// フェードイン要素を監視
document.addEventListener('DOMContentLoaded', function() {
  const fadeElements = document.querySelectorAll('.fade-in-element');
  fadeElements.forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 遅いフェードイン */
.fade-in-slow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

.fade-in-slow.show {
  opacity: 1;
  transform: translateY(0);
}

/* 速いフェードイン */
.fade-in-fast {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade-in-fast.show {
  opacity: 1;
  transform: translateY(0);
}

/* バウンス付きフェードイン */
.fade-in-bounce {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fade-in-bounce.show {
  opacity: 1;
  transform: translateY(0);
}

スライドイン

① デモ

See the Pen スライドイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドインの特徴

方向を指定可能（上下左右）
自然な動きで視覚的インパクト大
レスポンシブ対応

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてスライドインを確認</h1>
</div>

<!-- スライドイン要素 -->
<div class="slide-in-left">
  <h2>左からスライドイン</h2>
</div>

<div style="height: 50vh; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-right">
  <h2>右からスライドイン</h2>
</div>

<div style="height: 50vh; background: #e9ecef; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-up">
  <h2>下からスライドイン</h2>
</div>

<div style="height: 50vh; background: #dee2e6; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-down">
  <h2>上からスライドイン</h2>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>すべてのスライドインが完了</h1>
</div>

③ CSS

/* 左からスライドイン */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.slide-in-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 右からスライドイン */
.slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* 下からスライドイン */
.slide-in-up {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 上からスライドイン */
.slide-in-down {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-down.show {
  opacity: 1;
  transform: translateY(0);
}

④ JavaScript

// スライドイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down, .slide-in-diagonal, .slide-in-delayed').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 斜めスライドイン */
.slide-in-diagonal {
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-diagonal.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* 遅延付きスライドイン（JavaScriptで制御） */
.slide-in-delayed {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
}

.slide-in-delayed.show {
  opacity: 1;
  transform: translateX(0);
}

ズームイン

① デモ

See the Pen ズームイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズームインの特徴

要素が小さく縮小された状態から拡大
注目を集める効果が高い
3D効果も追加可能

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてズームインを確認</h1>
</div>

<!-- ズームイン要素 -->
<div class="zoom-in-element">
  <h2>ズームイン効果</h2>
  <p>この要素が小さく縮小された状態から拡大します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>ズームインが完了</h1>
</div>

③ CSS

.zoom-in-element {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.zoom-in-element.show {
  opacity: 1;
  transform: scale(1);
}

④ JavaScript

// ズームイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.zoom-in-element, .zoom-in-bounce, .zoom-in-3d').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* バウンス付きズームイン */
.zoom-in-bounce {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.zoom-in-bounce.show {
  opacity: 1;
  transform: scale(1.05);
}

.zoom-in-bounce.show.final {
  transform: scale(1);
}

/* 3Dズームイン */
.zoom-in-3d {
  opacity: 0;
  transform: scale(0.3) rotateX(45deg);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.zoom-in-3d.show {
  opacity: 1;
  transform: scale(1) rotateX(0deg);
}

バウンスイン

① デモ

See the Pen バウンスイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このバウンスインの特徴

要素が跳ねながら登場
楽しい印象を与える
子供向けサイトやカジュアルなサイトに適している

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてバウンスインを確認</h1>
</div>

<!-- バウンスイン要素 -->
<div class="bounce-in-element">
  <h2>バウンスイン効果</h2>
  <p>この要素が跳ねながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>バウンスインが完了</h1>
</div>

③ CSS

.bounce-in-element {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-in-element.show {
  opacity: 1;
  transform: translateY(-20px);
}
.bounce-in-element.show.final {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

④ JavaScript

// バウンスイン要素のみを監視し、2段階アニメーション
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
        setTimeout(() => {
          entry.target.classList.add('final');
        }, 600); // バウンス効果をより長く表示
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.bounce-in-element, .bounce-in-down, .bounce-in-left').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 上からバウンスイン */
.bounce-in-down {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-down.show {
  opacity: 1;
  transform: translateY(20px);
}

.bounce-in-down.show.final {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 左右バウンスイン */
.bounce-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-left.show {
  opacity: 1;
  transform: translateX(20px);
}

.bounce-in-left.show.final {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 右からバウンスイン */
.bounce-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-right.show {
  opacity: 1;
  transform: translateX(-20px);
}

.bounce-in-right.show.final {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

フリップイン

① デモ

See the Pen フリップイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップインの特徴

要素が回転しながら登場
3D効果で視覚的インパクト大
カードや画像に特に効果的

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてフリップインを確認</h1>
</div>

<!-- フリップイン要素 -->
<div class="flip-in-element">
  <h2>フリップイン効果</h2>
  <p>この要素が回転しながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>フリップインが完了</h1>
</div>

③ CSS

.flip-in-element {
  opacity: 0;
  transform: perspective(1000px) rotateY(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  backface-visibility: hidden;
  width: fit-content;
}
.flip-in-element.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

④ JavaScript

// フリップイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.flip-in-element, .flip-in-x, .flip-in-complex').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* X軸回転フリップイン */
.flip-in-x {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-x.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) scale(1);
}

/* 複合回転フリップイン */
.flip-in-complex {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) rotateY(450deg) scale(0.8);
  transition: opacity 2.5s ease-out, transform 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-complex.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
}

/* 斜め回転フリップイン */
.flip-in-diagonal {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) rotateZ(405deg) scale(0.8);
  transition: opacity 2.2s ease-out, transform 2.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-diagonal.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) rotateZ(0deg) scale(1);
}

/* 左右フリップイン */
.flip-in-left {
  opacity: 0;
  transform: perspective(1000px) rotateY(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: left center;
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-left.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

/* 右からフリップイン */
.flip-in-right {
  opacity: 0;
  transform: perspective(1000px) rotateY(-450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: right center;
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-right.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

スケールイン

① デモ

See the Pen スケールイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールインの特徴

要素が変形しながら登場
ユニークな視覚効果
特定の要素を強調したい場合に効果的

② HTML

<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてスケールインを確認</h1>
</div>

<!-- スケールイン要素 -->
<div class="scale-in-element">
  <h2>スケールイン効果</h2>
  <p>この要素が変形しながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スケールインが完了</h1>
</div>

③ CSS

.scale-in-element {
  opacity: 0;
  transform: scale(0) rotate(720deg) skew(45deg, 45deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}
.scale-in-element.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

④ JavaScript

// スケールイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.scale-in-element, .scale-in-ellipse, .scale-in-spiral').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 楕円スケールイン */
.scale-in-ellipse {
  opacity: 0;
  transform: scaleX(0) scaleY(0) skew(30deg, 30deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-ellipse.show {
  opacity: 1;
  transform: scaleX(1) scaleY(1) skew(0deg, 0deg);
}

/* スパイラルスケールイン */
.scale-in-spiral {
  opacity: 0;
  transform: scale(0) rotate(1080deg) skew(45deg, 45deg);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-spiral.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

/* 変形スケールイン */
.scale-in-morph {
  opacity: 0;
  transform: scale(0) rotate(360deg) skew(60deg, 60deg) translateX(-50px);
  transition: opacity 1.8s ease-out, transform 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-morph.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateX(0);
}

/* バウンス変形スケールイン */
.scale-in-bounce {
  opacity: 0;
  transform: scale(0) rotate(540deg) skew(30deg, 30deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-bounce.show {
  opacity: 1;
  transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
}

.scale-in-bounce.show.final {
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

実装のポイント

1. スクロール発火制御の統一

すべてのアニメーションで同じJavaScriptコードを使用できます。
※クラス名のみ要変更

// 共通のスクロール発火制御
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
}, {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
});

// すべてのアニメーション要素を監視
document.addEventListener('DOMContentLoaded', function() {
  const animationElements = document.querySelectorAll('[class*="-in-"]');
  animationElements.forEach(el => observer.observe(el));
});

2. パフォーマンス最適化

/* GPU加速を活用 */
.optimized-animation {
  will-change: transform, opacity;
  transform: translateZ(0); /* レイヤー分離 */
}

3. アクセシビリティ対応

/* アニメーション軽減設定に対応 */
@media (prefers-reduced-motion: reduce) {
  .fade-in-element,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .slide-in-down,
  .zoom-in-element,
  .bounce-in-element,
  .flip-in-element,
  .scale-in-element {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

4. レスポンシブ対応

/* モバイルではアニメーションを簡素化 */
@media (max-width: 768px) {
  .fade-in-element,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .slide-in-down,
  .zoom-in-element,
  .bounce-in-element,
  .flip-in-element,
  .scale-in-element {
    transition-duration: 0.5s; /* 短縮 */
  }
}

よくある質問

アニメーションの速度を調整したい場合は？: transition-durationプロパティで調整できます。

.fast-animation { transition-duration: 0.3s; } .slow-animation { transition-duration: 2s; }
複数の要素を順番にアニメーションさせたい場合は？: transition-delayプロパティを使用します。

.staggered-element:nth-child(1) { transition-delay: 0s; } .staggered-element:nth-child(2) { transition-delay: 0.2s; } .staggered-element:nth-child(3) { transition-delay: 0.4s; }
スクロール時にアニメーションを開始したい場合は？: この記事で紹介しているIntersection Observer APIを使用します。すべてのアニメーションがスクロール対応になっています。

// 基本的なスクロール発火制御（記事内で紹介済み） const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('show'); } }); }, observerOptions); // すべてのアニメーション要素を監視 document.addEventListener('DOMContentLoaded', function() { const animationElements = document.querySelectorAll( '.fade-in-element, .slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down, ' + '.zoom-in-element, .bounce-in-element, .flip-in-element, .scale-in-element' ); animationElements.forEach(el => observer.observe(el)); });