アイコンアニメーション &#8211; ケケンタの独学ITブログ

3Dアイコンアニメーションとは

3Dアイコンアニメーションは、立体的な効果を使用してアイコンに奥行きと動きを与えるアニメーション効果です。ユーザーに視覚的なインパクトを与え、モダンで洗練された印象を提供する効果的な手法です。

効果的な使用場面

適している場面

プレミアムサイト
エンターテイメントサイト
ゲームサイト
ポートフォリオサイト
モダンなWebアプリ
イベントサイト

避けるべき場面

ビジネスサイト
情報量の多いサイト
読みやすさを重視するサイト
パフォーマンスを重視するサイト

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
3Dフリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
3Dティルト効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3Dローテーション効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
3Dスライド効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3Dスケール効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

FontAwesomeの読み込み

FontAwesomeアイコンを使用するために、HTMLのheadセクションに以下のコードを追加してください。
※バージョンはご自身の環境にあわせてご選択ください。基本は最新で大丈夫かと思います。

3Dフリップ効果

3D空間でアイコンがフリップするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dフリップ効果の特徴

立体的なフリップ動き
視覚的インパクトが高い
モダンな印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.flip3d-icons {
  display: flex;
  gap: 30px;
}

.flip3d-icon {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

.flip3d-front,
.flip3d-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.flip3d-back {
  transform: rotateY(180deg);
  background: rgba(255, 215, 0, 0.2);
}

.flip3d-icon[data-state="flipped"] {
  transform: rotateY(180deg);
}

/* アニメーション効果 */
@keyframes flip3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

/* 逆方向のアニメーション */
@keyframes flip3dReverse {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.flip3d-icon.flipping {
  animation: flip3d 0.8s ease;
}

.flip3d-icon.flipping.reverse {
  animation: flip3dReverse 0.8s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.flip3d-icon');

  // 3Dフリップアニメーションクラス
  class Flip3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleFlip(icon);
        });
      });
    }

    toggleFlip(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'front' ? 'flipped' : 'front';

      // アニメーション開始
      icon.classList.add('flipping');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'flipped') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('flipping', 'reverse');
      }, 800);
    }
  }

  // アニメーション初期化
  new Flip3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* フリップ軸の変更（X軸） */
.flip3d-icon[data-state="flipped"] {
  transform: rotateX(180deg);
}

/* フリップ速度の調整 */
.flip3d-icon {
  transition: transform 1s ease;
}

/* フリップ時の影効果 */
.flip3d-icon.flipping {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

3Dティルト効果

3D空間でアイコンが傾斜するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dティルト効果の特徴

立体的な傾斜動き
マウス追従効果
インタラクティブな印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.tilt3d-icons {
  display: flex;
  gap: 30px;
}

.tilt3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.tilt3d-icon:hover {
  transform: perspective(1000px) rotateX(20deg) rotateY(20deg);
  background: rgba(255, 215, 0, 0.2);
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes tilt3d {
  0%, 100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(15deg) rotateY(15deg);
  }
}

.tilt3d-icon.animate {
  animation: tilt3d 2s ease-in-out infinite;
}

/* マウス移動時のティルト効果を優先 */
.tilt3d-icon[style*="transform"] {
  animation: none !important;
}

/* 自動アニメーションが確実に動作するように */
.tilt3d-icon.animate {
  animation: tilt3d 2s ease-in-out infinite !important;
}

/* 3Dローテーション効果のホバー処理を確実に動作させる */
.rotate3d-icon[style*="transform"] {
  animation: none !important;
}

.rotate3d-icon.animate {
  animation: rotate3d 3s linear infinite !important;
}

/* 3Dスライド効果のホバー処理を確実に動作させる */
.slide3d-icon[style*="transform"] {
  animation: none !important;
}

.slide3d-icon.animate {
  animation: slide3d 2s ease-in-out infinite !important;
}

/* 3Dスケール効果のホバー処理を確実に動作させる */
.scale3d-icon[style*="transform"] {
  animation: none !important;
}

.scale3d-icon.animate {
  animation: scale3d 2s ease-in-out infinite !important;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.tilt3d-icon');

  // 3Dティルトアニメーションクラス
  class Tilt3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // マウス移動でのティルト効果
        icon.addEventListener('mousemove', (e) => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.tilt3D(icon, e);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetTilt(icon);
          // 自動アニメーションを確実に再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    tilt3D(icon, e) {
      const rect = icon.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      // ティルト強度を調整（より大きな動き）
      const rotateX = (y - centerY) / 2;
      const rotateY = (centerX - x) / 2;

      // インラインスタイルで適用
      icon.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      icon.style.background = 'rgba(255, 215, 0, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetTilt(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.3s ease';
    }
  }

  // アニメーション初期化
  new Tilt3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* ティルト強度の調整 */
.tilt3d-icon:hover {
  transform: perspective(1000px) rotateX(30deg) rotateY(30deg);
}

/* ティルト速度の調整 */
.tilt3d-icon {
  transition: all 0.5s ease;
}

/* ティルト時の影効果 */
.tilt3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

3Dローテーション効果

3D空間でアイコンが回転するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dローテーションの特徴

立体的な回転動き
視覚的インパクトが高い
動的な表現

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.rotate3d-icons {
  display: flex;
  gap: 30px;
}

.rotate3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.rotate3d-icon:hover {
  transform: perspective(1000px) rotateY(360deg) !important;
  background: rgba(255, 107, 107, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes rotate3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.rotate3d-icon.animate {
  animation: rotate3d 3s linear infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotate3d-icon');

  // 3Dローテーションアニメーションクラス
  class Rotate3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          this.rotate3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetRotate(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rotate3D(icon) {
      // 自動アニメーションを一時停止
      icon.classList.remove('animate');

      // インラインスタイルで確実に適用
      icon.style.transform = 'perspective(1000px) rotateY(360deg)';
      icon.style.background = 'rgba(255, 107, 107, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetRotate(icon) {
      // インラインスタイルをクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.6s ease';
    }
  }

  // アニメーション初期化
  new Rotate3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate3d-icon:hover {
  transform: perspective(1000px) rotateX(360deg);
}

/* 回転速度の調整 */
.rotate3d-icon {
  transition: all 1s ease;
}

/* 回転時の影効果 */
.rotate3d-icon:hover {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

3Dスライド効果

3D空間でアイコンがスライドするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスライド効果の特徴

立体的なスライド動き
奥行きのある表現
スムーズな動き

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.slide3d-icons {
  display: flex;
  gap: 30px;
}

.slide3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.slide3d-icon:hover {
  transform: perspective(1000px) translateZ(50px) translateY(-20px) !important;
  background: rgba(0, 210, 255, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes slide3d {
  0%, 100% {
    transform: perspective(1000px) translateZ(0) translateY(0);
  }
  50% {
    transform: perspective(1000px) translateZ(30px) translateY(-10px);
  }
}

.slide3d-icon.animate {
  animation: slide3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.slide3d-icon');

  // 3Dスライドアニメーションクラス
  class Slide3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.slide3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetSlide(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 250);
      });
    }

    slide3D(icon) {
      // インラインスタイルで確実に適用
      icon.style.transform = 'perspective(1000px) translateZ(50px) translateY(-20px)';
      icon.style.background = 'rgba(0, 210, 255, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetSlide(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.5s ease';
    }
  }

  // アニメーション初期化
  new Slide3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* スライド強度の調整 */
.slide3d-icon:hover {
  transform: perspective(1000px) translateZ(80px) translateY(-30px);
}

/* スライド速度の調整 */
.slide3d-icon {
  transition: all 0.8s ease;
}

/* スライド時の影効果 */
.slide3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

3Dスケール効果

3D空間でアイコンが拡大・縮小するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスケール効果の特徴

立体的な拡大・縮小
奥行きのある表現
焦点を集める効果

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.scale3d-icons {
  display: flex;
  gap: 30px;
}

.scale3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.scale3d-icon:hover {
  transform: perspective(1000px) scale3d(1.3, 1.3, 1.3) translateZ(30px) !important;
  background: rgba(254, 202, 87, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes scale3d {
  0%, 100% {
    transform: perspective(1000px) scale3d(1, 1, 1) translateZ(0);
  }
  50% {
    transform: perspective(1000px) scale3d(1.2, 1.2, 1.2) translateZ(20px);
  }
}

.scale3d-icon.animate {
  animation: scale3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale3d-icon');

  // 3Dスケールアニメーションクラス
  class Scale3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.scale3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetScale(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    scale3D(icon) {
      // インラインスタイルで適用
      icon.style.transform = 'perspective(1000px) scale3d(1.3, 1.3, 1.3) translateZ(30px)';
      icon.style.background = 'rgba(254, 202, 87, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetScale(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.4s ease';
    }
  }

  // アニメーション初期化
  new Scale3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale3d-icon:hover {
  transform: perspective(1000px) scale3d(1.5, 1.5, 1.5) translateZ(50px);
}

/* スケール速度の調整 */
.scale3d-icon {
  transition: all 0.6s ease;
}

/* スケール時の影効果 */
.scale3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

まとめ

今回ご紹介した5種類の3Dアイコンアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

プレミアムサイト: 3Dフリップ効果・3Dスケール効果
エンターテイメントサイト: 3Dローテーション効果・3Dティルト効果
ゲームサイト: 3Dスライド効果

実装のポイント

パフォーマンスを考慮: 3Dアニメーションは重いので軽量化
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 3D対応ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

FontAwesomeアイコンのメリット

統一感: デザインの一貫性が向上
拡張性: 豊富なアイコンライブラリから選択可能
カスタマイズ性: 色やサイズの調整が容易
ブラウザ互換性: より安定した表示
プロフェッショナル性: ビジネス用途に適した見た目

ケケンタ

3Dアイコンアニメーションは、Webサイトに視覚的なインパクトを与える効果的な手法です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では業界最安値でWeb制作を...

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】アイコンモーフィングアニメーション｜6種類【Web制作】

ケケンタ — Thu, 28 Aug 2025 00:12:47 +0000

ケケンタ

アイコンモーフィングアニメーションを実装したい……

ケケンタ

アイコンの形状変化を作りたい……

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

Web制作において必須のUI要素
アイコンモーフィングアニメーション

をご紹介します。

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

この記事で紹介するアイコンモーフィングアニメーション

形状変化（形状の変化）
パス変化（SVGパスの変化）
カラー変化（色の変化）
スケール変化（拡大/縮小）
ローテーション変化（回転変化）
透明度変化（透明度の変化）

ケケンタ

特に状態変化やトグル切り替えには、アイコンモーフィングアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

アイコンモーフィングアニメーションとは

アイコンモーフィングアニメーションは、アイコンの形状や属性が滑らかに変化することで、状態変化やトグル切り替えを視覚的に表現するアニメーション効果です。ユーザーに直感的な理解を提供し、インタラクション促進を実現する効果的な手法です。

効果的な使用場面

適している場面

状態切り替え（ON/OFF）
トグルボタン
メニュー開閉
設定変更
モード切り替え
アプリ状態表示

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
形状変化	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
パス変化	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
カラー変化	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケール変化	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ローテーション変化	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
透明度変化	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

FontAwesomeの読み込み

形状変化

アイコンの形状が滑らかに変化するアニメーションです。

① デモ

See the Pen アイコンモーフィング形状変化 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この形状変化の特徴

滑らかな形状変化
視覚的インパクトが高い
状態変化の明確化

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.shape-morphing-icons {
  display: flex;
  gap: 30px;
}

.shape-morphing-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.shape-morphing-icon i {
  font-size: 32px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  transition: all 0.5s ease;
}

/* 初期状態の設定 */
.shape-morphing-icon[data-state="play"] .pause-icon,
.shape-morphing-icon[data-state="menu"] .close-icon {
  opacity: 0;
  transform: scale(0.5);
  visibility: hidden;
}

.shape-morphing-icon[data-state="play"] .play-icon,
.shape-morphing-icon[data-state="menu"] .menu-icon {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/* 状態変更時の表示制御 */
.shape-morphing-icon[data-state="pause"] .play-icon {
  opacity: 0;
  transform: scale(0.5);
  visibility: hidden;
}

.shape-morphing-icon[data-state="pause"] .pause-icon {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.shape-morphing-icon[data-state="close"] .menu-icon {
  opacity: 0;
  transform: scale(0.5);
  visibility: hidden;
}

.shape-morphing-icon[data-state="close"] .close-icon {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}



/* アニメーション効果 */
@keyframes shapeMorph {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(0.6);
    opacity: 0;
  }
  75% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.shape-morphing-icon.morphing i {
  animation: shapeMorph 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アニメーション中の重なり防止 */
.shape-morphing-icon.morphing .play-icon,
.shape-morphing-icon.morphing .pause-icon,
.shape-morphing-icon.morphing .menu-icon,
.shape-morphing-icon.morphing .close-icon {
  transition: none;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.shape-morphing-icon');

  // 形状変化モーフィングアニメーションクラス
  class ShapeMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleShape(icon);
        });
      });
    }

    toggleShape(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = this.getNextState(currentState);

      icon.classList.add('morphing');
      icon.setAttribute('data-state', newState);

      // アイコンの表示制御を実行
      this.updateIconVisibility(icon, newState);

      setTimeout(() => {
        icon.classList.remove('morphing');
      }, 600);
    }

    getNextState(currentState) {
      const stateMap = {
        'play': 'pause',
        'pause': 'play',
        'menu': 'close',
        'close': 'menu'
      };
      return stateMap[currentState] || currentState;
    }



    // 状態に応じたアイコンの表示制御
    updateIconVisibility(icon, newState) {
      const allIcons = icon.querySelectorAll('i');

      // アニメーション開始時：現在のアイコンをフェードアウト
      allIcons.forEach(iconElement => {
        iconElement.style.transition = 'opacity 0.15s ease-out';
        iconElement.style.opacity = '0';
      });

      // アニメーション中間：アイコンを完全に非表示
      setTimeout(() => {
        allIcons.forEach(iconElement => {
          iconElement.style.visibility = 'hidden';
        });

        // 新しい状態のアイコンを準備
        const targetIcon = icon.querySelector(`.${newState}-icon`);

        if (targetIcon) {
          targetIcon.style.visibility = 'visible';
          targetIcon.style.opacity = '0';
          targetIcon.style.transform = 'scale(0.6) rotate(90deg)';
        }
      }, 150);

      // アニメーション完了：新しいアイコンをフェードイン
      setTimeout(() => {
        const targetIcon = icon.querySelector(`.${newState}-icon`);

        if (targetIcon) {
          targetIcon.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
          targetIcon.style.opacity = '1';
          targetIcon.style.transform = 'scale(1)';
        }
      }, 300);
    }
  }

  // アニメーション初期化
  new ShapeMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* 形状変化速度の調整 */
.shape-morphing-icon {
  transition: all 0.8s ease;
}

/* 形状変化時の影効果 */
.shape-morphing-icon.morphing {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* 形状変化時の色変化 */
.shape-morphing-icon.morphing i {
  color: #ffd700;
}

パス変化

SVGパスが滑らかに変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このパス変化の特徴

SVGパスの動的変化
滑らかな形状変換
高度な視覚効果

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.path-morphing-icons {
  display: flex;
  gap: 40px;
}

.path-morphing-icon {
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.path-morphing-icon path {
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.5s ease;
}

.path-morphing-icon[data-state="menu"] .path-close,
.path-morphing-icon[data-state="play"] .path-pause {
  opacity: 0;
  stroke-dasharray: 0;
  visibility: hidden;
}

.path-morphing-icon[data-state="menu"] .path-line,
.path-morphing-icon[data-state="play"] .path-play {
  opacity: 1;
  stroke-dasharray: 24;
  visibility: visible;
}

/* 状態変更時の表示制御 */
.path-morphing-icon[data-state="close"] .path-line {
  opacity: 0;
  stroke-dasharray: 0;
  visibility: hidden;
}

.path-morphing-icon[data-state="close"] .path-close {
  opacity: 1;
  stroke-dasharray: 24;
  visibility: visible;
}

.path-morphing-icon[data-state="pause"] .path-play {
  opacity: 0;
  stroke-dasharray: 0;
  visibility: hidden;
}

.path-morphing-icon[data-state="pause"] .path-pause {
  opacity: 1;
  stroke-dasharray: 24;
  visibility: visible;
}

/* アニメーション効果 */
@keyframes pathMorph {
  0% {
    stroke-dasharray: 24;
    opacity: 1;
    visibility: visible;
  }
  25% {
    stroke-dasharray: 18;
    opacity: 0.7;
    visibility: visible;
  }
  50% {
    stroke-dasharray: 12;
    opacity: 0.3;
    visibility: visible;
  }
  75% {
    stroke-dasharray: 6;
    opacity: 0.1;
    visibility: visible;
  }
  100% {
    stroke-dasharray: 0;
    opacity: 0;
    visibility: visible;
  }
}

.path-morphing-icon.morphing path {
  animation: pathMorph 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アニメーション中の重なり防止 */
.path-morphing-icon.morphing .path-line,
.path-morphing-icon.morphing .path-close,
.path-morphing-icon.morphing .path-play,
.path-morphing-icon.morphing .path-pause {
  transition: none;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.path-morphing-icon');

  // パス変化モーフィングアニメーションクラス
  class PathMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.togglePath(icon);
        });
      });
    }

         togglePath(icon) {
       const currentState = icon.getAttribute('data-state');
       const newState = this.getNextState(currentState);

       icon.classList.add('morphing');
       icon.setAttribute('data-state', newState);

       // アニメーション完了後にパスの表示状態を復元
       setTimeout(() => {
         icon.classList.remove('morphing');
         this.updatePathVisibility(icon, newState);
       }, 600);
     }

     // パスの表示状態を更新
     updatePathVisibility(icon, state) {
       const allPaths = icon.querySelectorAll('path');

       allPaths.forEach(path => {
         if (state === 'menu' && path.classList.contains('path-line')) {
           path.style.opacity = '1';
           path.style.strokeDasharray = '24';
           path.style.visibility = 'visible';
         } else if (state === 'menu' && path.classList.contains('path-close')) {
           path.style.opacity = '0';
           path.style.strokeDasharray = '0';
           path.style.visibility = 'hidden';
         } else if (state === 'close' && path.classList.contains('path-line')) {
           path.style.opacity = '0';
           path.style.strokeDasharray = '0';
           path.style.visibility = 'hidden';
         } else if (state === 'close' && path.classList.contains('path-close')) {
           path.style.opacity = '1';
           path.style.strokeDasharray = '24';
           path.style.visibility = 'visible';
         } else if (state === 'play' && path.classList.contains('path-play')) {
           path.style.opacity = '1';
           path.style.strokeDasharray = '24';
           path.style.visibility = 'visible';
         } else if (state === 'play' && path.classList.contains('path-pause')) {
           path.style.opacity = '0';
           path.style.strokeDasharray = '0';
           path.style.visibility = 'hidden';
         } else if (state === 'pause' && path.classList.contains('path-play')) {
           path.style.opacity = '0';
           path.style.strokeDasharray = '0';
           path.style.visibility = 'hidden';
         } else if (state === 'pause' && path.classList.contains('path-pause')) {
           path.style.opacity = '1';
           path.style.strokeDasharray = '24';
           path.style.visibility = 'visible';
         }
       });
     }

     getNextState(currentState) {
       const stateMap = {
         'menu': 'close',
         'close': 'menu',
         'play': 'pause',
         'pause': 'play'
       };
       return stateMap[currentState] || currentState;
     }
   }

   // アニメーション初期化
   new PathMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* パス変化速度の調整 */
.path-morphing-icon {
  transition: all 0.8s ease;
}

/* パス変化時の色変化 */
.path-morphing-icon.morphing path {
  stroke: #ffd700;
}

/* パス変化時の太さ調整 */
.path-morphing-icon.morphing path {
  stroke-width: 3;
}

カラー変化

アイコンの色が滑らかに変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカラー効果の特徴

滑らかな色の変化
視覚的インパクトが高い
状態変化の明確化

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.color-morphing-icons {
  display: flex;
  gap: 20px;
}

.color-morphing-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.6s ease;
}

.color-morphing-icon[data-state="normal"] {
  color: white;
  transform: scale(1);
}

.color-morphing-icon[data-state="active"] {
  color: #ff6b6b;
  transform: scale(1.2);
}

/* アニメーション効果 */
@keyframes colorMorph {
  0% {
    color: white;
    transform: scale(1);
  }
  25% {
    color: #ffd700;
    transform: scale(1.1);
  }
  50% {
    color: #ffd700;
    transform: scale(1.1);
  }
  75% {
    color: #ffd700;
    transform: scale(1.1);
  }
  100% {
    color: #ff6b6b;
    transform: scale(1.2);
  }
}

/* 逆方向のアニメーション */
@keyframes colorMorphReverse {
  0% {
    color: #ff6b6b;
    transform: scale(1.2);
  }
  25% {
    color: #ffd700;
    transform: scale(1.1);
  }
  50% {
    color: #ffd700;
    transform: scale(1.1);
  }
  75% {
    color: #ffd700;
    transform: scale(1.1);
  }
  100% {
    color: white;
    transform: scale(1);
  }
}

.color-morphing-icon.morphing {
  animation: colorMorph 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.color-morphing-icon.morphing.reverse {
  animation: colorMorphReverse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アニメーション完了後の状態制御 */
.color-morphing-icon[data-state="normal"] {
  color: white;
  transform: scale(1);
}

.color-morphing-icon[data-state="active"] {
  color: #ff6b6b;
  transform: scale(1.2);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.color-morphing-icon');

  // カラー変化モーフィングアニメーションクラス
  class ColorMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleColor(icon);
        });
      });
    }

    toggleColor(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'normal' ? 'active' : 'normal';

      // アニメーション開始
      icon.classList.add('morphing');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'active') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('morphing', 'reverse');
      }, 600);
    }
  }

  // アニメーション初期化
  new ColorMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* カラー変化速度の調整 */
.color-morphing-icon {
  transition: all 1s ease;
}

/* カラー変化時の影効果 */
.color-morphing-icon.morphing {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* カラー変化時の回転効果 */
.color-morphing-icon.morphing {
  animation: colorMorphRotate 0.6s ease;
}

@keyframes colorMorphRotate {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  100% { transform: scale(1.2) rotate(360deg); }
}

スケール変化

アイコンが拡大・縮小しながら変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

動的な拡大・縮小
視覚的インパクトが高い
状態変化の明確化

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.scale-morphing-icons {
  display: flex;
  gap: 20px;
}

.scale-morphing-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

.scale-morphing-icon[data-state="small"] {
  transform: scale(1);
  color: white;
}

.scale-morphing-icon[data-state="large"] {
  transform: scale(1.5);
}

/* アニメーション効果 */
@keyframes scaleMorph {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.5);
  }
}

/* 逆方向のアニメーション */
@keyframes scaleMorphReverse {
  0% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.scale-morphing-icon.morphing {
  animation: scaleMorph 0.5s ease;
}

.scale-morphing-icon.morphing.reverse {
  animation: scaleMorphReverse 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale-morphing-icon');

  // スケール変化モーフィングアニメーションクラス
  class ScaleMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleScale(icon);
        });
      });
    }

    toggleScale(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'small' ? 'large' : 'small';

      // アニメーション開始
      icon.classList.add('morphing');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'large') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('morphing', 'reverse');
      }, 500);
    }
  }

  // アニメーション初期化
  new ScaleMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* スケール変化速度の調整 */
.scale-morphing-icon {
  transition: all 0.8s ease;
}

/* スケール変化時の影効果 */
.scale-morphing-icon.morphing {
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* スケール変化時の回転効果 */
.scale-morphing-icon.morphing {
  animation: scaleMorphRotate 0.5s ease;
}

@keyframes scaleMorphRotate {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(180deg); }
  100% { transform: scale(1.5) rotate(360deg); }
}

ローテーション変化

アイコンが回転しながら変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーション効果の特徴

動的な回転動き
視覚的インパクトが高い
方向性のある表現

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.rotation-morphing-icons {
  display: flex;
  gap: 20px;
}

.rotation-morphing-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.6s ease;
}

.rotation-morphing-icon[data-state="normal"] {
  transform: rotate(0deg);
  color: white;
}

.rotation-morphing-icon[data-state="rotated"] {
  transform: rotate(180deg);
  color: #00d2ff;
}

/* アニメーション効果 */
@keyframes rotationMorph {
  0% {
    transform: rotate(0deg);
    color: white;
  }
  50% {
    transform: rotate(90deg);
    color: #ffd700;
  }
  100% {
    transform: rotate(180deg);
    color: #00d2ff;
  }
}

/* 逆方向のアニメーション */
@keyframes rotationMorphReverse {
  0% {
    transform: rotate(180deg);
    color: #00d2ff;
  }
  50% {
    transform: rotate(90deg);
    color: #ffd700;
  }
  100% {
    transform: rotate(0deg);
    color: white;
  }
}

.rotation-morphing-icon.morphing {
  animation: rotationMorph 0.6s ease;
}

.rotation-morphing-icon.morphing.reverse {
  animation: rotationMorphReverse 0.6s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotation-morphing-icon');

  // ローテーション変化モーフィングアニメーションクラス
  class RotationMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleRotation(icon);
        });
      });
    }

    toggleRotation(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'normal' ? 'rotated' : 'normal';

      // アニメーション開始
      icon.classList.add('morphing');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'rotated') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('morphing', 'reverse');
      }, 600);
    }
  }

  // アニメーション初期化
  new RotationMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* ローテーション変化速度の調整 */
.rotation-morphing-icon {
  transition: all 1s ease;
}

/* ローテーション変化時の影効果 */
.rotation-morphing-icon.morphing {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* ローテーション変化時のスケール効果 */
.rotation-morphing-icon.morphing {
  animation: rotationMorphScale 0.6s ease;
}

@keyframes rotationMorphScale {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(90deg) scale(1.2); }
  100% { transform: rotate(180deg) scale(1); }
}

透明度変化

アイコンの透明度が滑らかに変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この透明度変化の特徴

滑らかな透明度変化
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.opacity-morphing-icons {
  display: flex;
  gap: 20px;
}

.opacity-morphing-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

.opacity-morphing-icon[data-state="visible"] {
  opacity: 1;
  color: white;
}

.opacity-morphing-icon[data-state="hidden"] {
  opacity: 0.3;
  color: #ff9ff3;
}

/* アニメーション効果 */
@keyframes opacityMorph {
  0% {
    opacity: 1;
    color: white;
  }
  50% {
    opacity: 0.6;
    color: #ffd700;
  }
  100% {
    opacity: 0.3;
    color: #ff9ff3;
  }
}

/* 逆方向のアニメーション */
@keyframes opacityMorphReverse {
  0% {
    opacity: 0.3;
    color: #ff9ff3;
  }
  50% {
    opacity: 0.6;
    color: #ffd700;
  }
  100% {
    opacity: 1;
    color: white;
  }
}

.opacity-morphing-icon.morphing {
  animation: opacityMorph 0.5s ease;
}

.opacity-morphing-icon.morphing.reverse {
  animation: opacityMorphReverse 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.opacity-morphing-icon');

  // 透明度変化モーフィングアニメーションクラス
  class OpacityMorphingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleOpacity(icon);
        });
      });
    }

    toggleOpacity(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'visible' ? 'hidden' : 'visible';

      // アニメーション開始
      icon.classList.add('morphing');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'hidden') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('morphing', 'reverse');
      }, 500);
    }
  }

  // アニメーション初期化
  new OpacityMorphingAnimation(icons);
});

⑤ カスタマイズ例

/* 透明度変化速度の調整 */
.opacity-morphing-icon {
  transition: all 0.8s ease;
}

/* 透明度変化時の影効果 */
.opacity-morphing-icon.morphing {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* 透明度変化時のスケール効果 */
.opacity-morphing-icon.morphing {
  animation: opacityMorphScale 0.5s ease;
}

@keyframes opacityMorphScale {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 0.3; transform: scale(1); }
}

まとめ

今回ご紹介した6種類のアイコンモーフィングアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

状態切り替え: 形状変化・パス変化
トグルボタン: カラー変化・スケール変化
メニュー開閉: ローテーション変化・透明度変化

実装のポイント

パフォーマンスを考慮: 軽量で滑らかなアニメーション
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 主要ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

FontAwesomeアイコンのメリット

統一感: デザインの一貫性が向上
拡張性: 豊富なアイコンライブラリから選択可能
カスタマイズ性: 色やサイズの調整が容易
ブラウザ互換性: より安定した表示
プロフェッショナル性: ビジネス用途に適した見た目

ケケンタ

アイコンモーフィングアニメーションは、Webサイトのインタラクション性を向上させる効果的な手法です。FontAwesomeアイコンを使用することで、より統一感のあるデザインを実現できます。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】アイコンホバーアニメーション｜5種類【Web制作】

ケケンタ — Wed, 27 Aug 2025 00:05:44 +0000

ケケンタ

アイコンホバーアニメーションを実装したい……

ケケンタ

マウスホバーで魅力的な効果を作りたい……

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

Web制作において必須のUI要素
アイコンホバーアニメーション

をご紹介します。

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

この記事で紹介するアイコンホバーアニメーション

スケール効果（拡大・縮小）
ローテーション効果（回転）
カラー効果（色変化）
シャドウ効果（影効果）
ボーダー効果（境界線効果）

ケケンタ

特にインタラクティブな要素やユーザーエンゲージメントには、アイコンホバーアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

アイコンホバーアニメーションとは

アイコンホバーアニメーションは、マウスホバー時にアイコンに動的な効果を与えるアニメーション効果です。ユーザーの操作に対する視覚的なフィードバックを提供し、インタラクティブな体験を向上させる効果的な手法です。

効果的な使用場面

適している場面

ナビゲーションメニュー
ボタン要素
ソーシャルメディアアイコン
機能アイコン
カテゴリアイコン
アクションボタン

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
スケール効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ローテーション効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
カラー効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
シャドウ効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ボーダー効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

FontAwesomeの読み込み

スケール効果

アイコンがホバー時に拡大・縮小するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

シンプルで分かりやすい動き
視覚的インパクトが高い
インタラクティブ感の演出

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.scale-icons {
  display: flex;
  gap: 20px;
}

.scale-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.scale-icon:hover {
  transform: scale(1.3);
  color: #ff6b6b;
}

/* アニメーション効果 */
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.scale-icon.animate {
  animation: scale 1s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale-icon');

  // スケールアニメーションクラス
  class ScaleIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        // ホバー時のアニメーション
        icon.addEventListener('mouseenter', () => {
          this.startScale(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.stopScale(icon);
        });

        // クリック時のアニメーション
        icon.addEventListener('click', () => {
          this.triggerScale(icon);
        });
      });
    }

    startScale(icon) {
      icon.style.transform = 'scale(1.3)';
      icon.style.color = '#ff6b6b';
    }

    stopScale(icon) {
      icon.style.transform = 'scale(1)';
      icon.style.color = 'white';
    }

    triggerScale(icon) {
      icon.classList.add('animate');
      setTimeout(() => {
        icon.classList.remove('animate');
      }, 1000);
    }
  }

  // アニメーション初期化
  new ScaleIconAnimation(icons);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale-icon:hover {
  transform: scale(1.5);
}

/* スケール速度の調整 */
.scale-icon {
  transition: transform 0.5s ease;
}

/* スケール時の回転効果 */
.scale-icon:hover {
  transform: scale(1.3) rotate(10deg);
}

ローテーション効果

アイコンがホバー時に回転するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーション効果の特徴

動的な回転動き
視覚的インパクトが高い
機械的な印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.rotate-icons {
  display: flex;
  gap: 20px;
}

.rotate-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.6s ease;
}

.rotate-icon:hover {
  transform: rotate(360deg);
  color: #4ecdc4;
}

/* アニメーション効果 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-icon.animate {
  animation: rotate 2s linear infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotate-icon');

  // ローテーションアニメーションクラス
  class RotateIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        // ホバー時のアニメーション
        icon.addEventListener('mouseenter', () => {
          this.startRotate(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.stopRotate(icon);
        });

        // クリック時のアニメーション
        icon.addEventListener('click', () => {
          this.triggerRotate(icon);
        });
      });
    }

    startRotate(icon) {
      icon.style.transform = 'rotate(360deg)';
      icon.style.color = '#4ecdc4';
    }

    stopRotate(icon) {
      icon.style.transform = 'rotate(0deg)';
      icon.style.color = 'white';
    }

    triggerRotate(icon) {
      icon.classList.add('animate');
      setTimeout(() => {
        icon.classList.remove('animate');
      }, 2000);
    }
  }

  // アニメーション初期化
  new RotateIconAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate-icon:hover {
  transform: rotateX(360deg);
}

/* 回転速度の調整 */
.rotate-icon {
  transition: transform 1s ease;
}

/* 回転時のスケール効果 */
.rotate-icon:hover {
  transform: rotate(360deg) scale(1.2);
}

カラー効果

アイコンがホバー時に色変化するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカラー効果の特徴

滑らかな色変化
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.color-icons {
  display: flex;
  gap: 20px;
}

.color-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: color 0.4s ease;
}

.color-icon:hover {
  color: #ff6b6b;
  text-shadow: 0 4px 8px rgba(255, 107, 107, 0.4);
}

/* アニメーション効果 */
@keyframes colorChange {
  0%, 100% {
    color: white;
  }
  50% {
    color: #ff6b6b;
  }
}

.color-icon.animate {
  animation: colorChange 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.color-icon');

  // カラーアニメーションクラス
  class ColorIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        // ホバー時のアニメーション
        icon.addEventListener('mouseenter', () => {
          this.startColor(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.stopColor(icon);
        });

        // クリック時のアニメーション
        icon.addEventListener('click', () => {
          this.triggerColor(icon);
        });
      });
    }

    startColor(icon) {
      icon.style.color = '#ff6b6b';
      icon.style.textShadow = '0 4px 8px rgba(255, 107, 107, 0.4)';
    }

    stopColor(icon) {
      icon.style.color = 'white';
      icon.style.textShadow = '0 2px 4px rgba(0, 0, 0, 0.3)';
    }

    triggerColor(icon) {
      icon.classList.add('animate');
      setTimeout(() => {
        icon.classList.remove('animate');
      }, 2000);
    }
  }

  // アニメーション初期化
  new ColorIconAnimation(icons);
});

⑤ カスタマイズ例

/* 色変化の強度調整 */
.color-icon:hover {
  color: #ff4757;
}

/* 色変化速度の調整 */
.color-icon {
  transition: color 0.8s ease;
}

/* 色変化時のスケール効果 */
.color-icon:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

シャドウ効果

アイコンがホバー時に影効果を発揮するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このシャドウ効果の特徴

立体的な影効果
浮き上がる表現
モダンな印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.shadow-icons {
  display: flex;
  gap: 20px;
}

.shadow-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.4s ease;
}

.shadow-icon:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-5px);
  color: #00d2ff;
}

/* アニメーション効果 */
@keyframes shadow {
  0%, 100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
  }
  50% {
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    transform: translateY(-5px);
  }
}

.shadow-icon.animate {
  animation: shadow 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.shadow-icon');

  // シャドウアニメーションクラス
  class ShadowIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        // ホバー時のアニメーション
        icon.addEventListener('mouseenter', () => {
          this.startShadow(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.stopShadow(icon);
        });

        // クリック時のアニメーション
        icon.addEventListener('click', () => {
          this.triggerShadow(icon);
        });
      });
    }

    startShadow(icon) {
      icon.style.textShadow = '0 8px 16px rgba(0, 0, 0, 0.6)';
      icon.style.transform = 'translateY(-5px)';
      icon.style.color = '#00d2ff';
    }

    stopShadow(icon) {
      icon.style.textShadow = '0 2px 4px rgba(0, 0, 0, 0.3)';
      icon.style.transform = 'translateY(0)';
      icon.style.color = 'white';
    }

    triggerShadow(icon) {
      icon.classList.add('animate');
      setTimeout(() => {
        icon.classList.remove('animate');
      }, 2000);
    }
  }

  // アニメーション初期化
  new ShadowIconAnimation(icons);
});

⑤ カスタマイズ例

/* 影効果の強度調整 */
.shadow-icon:hover {
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

/* 影効果速度の調整 */
.shadow-icon {
  transition: all 0.6s ease;
}

/* 影効果時の回転 */
.shadow-icon:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-5px) rotate(5deg);
}

ボーダー効果

アイコンがホバー時に境界線効果を発揮するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このボーダー効果の特徴

境界線の動的変化
枠線の演出
エレガントな表現

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.border-icons {
  display: flex;
  gap: 20px;
}

.border-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 15px;
  border: 2px solid transparent;
  border-radius: 10px;
}

.border-icon:hover {
  border-color: #feca57;
  color: #feca57;
  background: rgba(254, 202, 87, 0.1);
}

/* アニメーション効果 */
@keyframes border {
  0%, 100% {
    border-color: transparent;
    color: white;
  }
  50% {
    border-color: #feca57;
    color: #feca57;
  }
}

.border-icon.animate {
  animation: border 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.border-icon');

  // ボーダーアニメーションクラス
  class BorderIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        // ホバー時のアニメーション
        icon.addEventListener('mouseenter', () => {
          this.startBorder(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.stopBorder(icon);
        });

        // クリック時のアニメーション
        icon.addEventListener('click', () => {
          this.triggerBorder(icon);
        });
      });
    }

    startBorder(icon) {
      icon.style.borderColor = '#feca57';
      icon.style.color = '#feca57';
      icon.style.background = 'rgba(254, 202, 87, 0.1)';
    }

    stopBorder(icon) {
      icon.style.borderColor = 'transparent';
      icon.style.color = 'white';
      icon.style.background = 'transparent';
    }

    triggerBorder(icon) {
      icon.classList.add('animate');
      setTimeout(() => {
        icon.classList.remove('animate');
      }, 2000);
    }
  }

  // アニメーション初期化
  new BorderIconAnimation(icons);
});

⑤ カスタマイズ例

/* ボーダー太さの調整 */
.border-icon:hover {
  border-width: 3px;
}

/* ボーダー速度の調整 */
.border-icon {
  transition: all 0.6s ease;
}

/* ボーダー時のスケール効果 */
.border-icon:hover {
  border-color: #feca57;
  color: #feca57;
  transform: scale(1.1);
}

まとめ

今回ご紹介した5種類のアイコンホバーアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

ナビゲーション: スケール効果・ローテーション効果
ボタン要素: カラー効果・シャドウ効果
機能アイコン: ボーダー効果

実装のポイント

パフォーマンスを考慮: 軽量で滑らかなアニメーション
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 主要ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

FontAwesomeアイコンのメリット

統一感: デザインの一貫性が向上
拡張性: 豊富なアイコンライブラリから選択可能
カスタマイズ性: 色やサイズの調整が容易
ブラウザ互換性: より安定した表示
プロフェッショナル性: ビジネス用途に適した見た目

ケケンタ

アイコンホバーアニメーションは、Webサイトのユーザー体験を向上させる効果的な手法です。FontAwesomeアイコンを使用することで、より統一感のあるデザインを実現できます。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】アイコンローディングアニメーション｜5種類【Web制作】

ケケンタ — Tue, 26 Aug 2025 02:03:31 +0000

ケケンタ

アイコンローディングアニメーションを実装したい……

ケケンタ

データ読み込み中の表示を作りたい……

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

Web制作において必須のUI要素
アイコンローディングアニメーション

をご紹介します。

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

この記事で紹介するアイコンローディングアニメーション

スピナー効果
パルス効果（脈動効果）
フェード効果（フェードイン/アウト）
スライド効果
ズーム効果

ケケンタ

特にデータ読み込みやAPI通信には、アイコンローディングアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

アイコンローディングアニメーションとは

アイコンローディングアニメーションは、データ読み込みや処理中であることを伝えるローディングのアニメーション効果です。ユーザーの待機時間を快適にし、システムが正常に動作していることを示す効果的な手法です。

効果的な使用場面

適している場面

データ読み込み画面
API通信中
ファイルアップロード
処理中の表示
検索結果読み込み
画像読み込み

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
スピナー効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パルス効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

FontAwesomeの読み込み

スピナー効果

アイコンが回転するスピナーアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスピナー効果の特徴

基本的な回転動き
視覚的インパクトが高い
ローディング感の演出

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.spinner-loading-icons {
  display: flex;
  gap: 20px;
}

.spinner-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: spinner 2s linear infinite;
}

/* アニメーション効果 */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-loading-icon.paused {
  animation-play-state: paused;
}

.spinner-loading-icon.slow {
  animation-duration: 3s;
}

.spinner-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.spinner-loading-icon');

  // スピナーローディングアニメーションクラス
  class SpinnerLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.2}s`;
        }, index * 100);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleSpinner(icon);
        });
      });
    }

    toggleSpinner(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ffd700';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new SpinnerLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.spinner-loading-icon {
  animation: spinnerX 2s linear infinite;
}

@keyframes spinnerX {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

/* 回転速度の調整 */
.spinner-loading-icon {
  animation-duration: 1.5s;
}

/* 回転時の影効果 */
.spinner-loading-icon {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

パルス効果

アイコンが脈動するパルスアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このパルス効果の特徴

脈動する動き
視覚的インパクトが高い
生命感のある表現

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.pulse-loading-icons {
  display: flex;
  gap: 20px;
}

.pulse-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: pulse 1.5s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.pulse-loading-icon.paused {
  animation-play-state: paused;
}

.pulse-loading-icon.slow {
  animation-duration: 2s;
}

.pulse-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.pulse-loading-icon');

  // パルスローディングアニメーションクラス
  class PulseLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.3}s`;
        }, index * 150);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.togglePulse(icon);
        });
      });
    }

    togglePulse(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ff6b6b';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new PulseLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* パルス強度の調整 */
.pulse-loading-icon {
  animation: pulseStrong 1.5s ease-in-out infinite;
}

@keyframes pulseStrong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* パルス速度の調整 */
.pulse-loading-icon {
  animation-duration: 2s;
}

/* パルス時の色変化 */
.pulse-loading-icon {
  animation: pulseColor 1.5s ease-in-out infinite;
}

@keyframes pulseColor {
  0%, 100% { color: white; }
  50% { color: #ffd700; }
}

フェード効果

アイコンがフェードイン・アウトするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

滑らかなフェード動き
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.fade-loading-icons {
  display: flex;
  gap: 20px;
}

.fade-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: fade 2s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes fade {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9);
  }
}

.fade-loading-icon.paused {
  animation-play-state: paused;
}

.fade-loading-icon.slow {
  animation-duration: 3s;
}

.fade-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.fade-loading-icon');

  // フェードローディングアニメーションクラス
  class FadeLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.4}s`;
        }, index * 200);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleFade(icon);
        });
      });
    }

    toggleFade(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#00d2ff';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new FadeLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* フェード強度の調整 */
.fade-loading-icon {
  animation: fadeStrong 2s ease-in-out infinite;
}

@keyframes fadeStrong {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* フェード速度の調整 */
.fade-loading-icon {
  animation-duration: 2.5s;
}

/* フェード時のスケール効果 */
.fade-loading-icon {
  animation: fadeScale 2s ease-in-out infinite;
}

@keyframes fadeScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.8); }
}

スライド効果

アイコンがスライドイン・アウトするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的なスライド動き
視覚的インパクトが高い
方向性のある表現

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* 固有のスタイル */
.slide-loading-icons {
  display: flex;
  gap: 20px;
}

.slide-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: slide 2s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes slide {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(20px);
    opacity: 0.7;
  }
}

.slide-loading-icon.paused {
  animation-play-state: paused;
}

.slide-loading-icon.slow {
  animation-duration: 3s;
}

.slide-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.slide-loading-icon');

  // スライドローディングアニメーションクラス
  class SlideLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.3}s`;
        }, index * 200);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleSlide(icon);
        });
      });
    }

    toggleSlide(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ff9ff3';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new SlideLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* スライド方向の変更（Y軸） */
.slide-loading-icon {
  animation: slideY 2s ease-in-out infinite;
}

@keyframes slideY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* スライド速度の調整 */
.slide-loading-icon {
  animation-duration: 2.5s;
}

/* スライド時の回転効果 */
.slide-loading-icon {
  animation: slideRotate 2s ease-in-out infinite;
}

@keyframes slideRotate {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(20px) rotate(180deg); }
}

ズーム効果

アイコンがズームイン・アウトするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小の動き
視覚的インパクトが高い
焦点を集める効果

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.zoom-loading-icons {
  display: flex;
  gap: 20px;
}

.zoom-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: zoom 1.5s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes zoom {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

.zoom-loading-icon.paused {
  animation-play-state: paused;
}

.zoom-loading-icon.slow {
  animation-duration: 2s;
}

.zoom-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.zoom-loading-icon');

  // ズームローディングアニメーションクラス
  class ZoomLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.2}s`;
        }, index * 150);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleZoom(icon);
        });
      });
    }

    toggleZoom(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#feca57';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new ZoomLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* ズーム強度の調整 */
.zoom-loading-icon {
  animation: zoomStrong 1.5s ease-in-out infinite;
}

@keyframes zoomStrong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* ズーム速度の調整 */
.zoom-loading-icon {
  animation-duration: 2s;
}

/* ズーム時の回転効果 */
.zoom-loading-icon {
  animation: zoomRotate 1.5s ease-in-out infinite;
}

@keyframes zoomRotate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
}

まとめ

今回ご紹介した5種類のアイコンローディングアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

データ読み込み: スピナー効果・パルス効果
API通信: フェード効果・ズーム効果
ファイル処理: スライド効果

実装のポイント

パフォーマンスを考慮: 軽量で滑らかなアニメーション
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 主要ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

FontAwesomeアイコンのメリット

統一感: デザインの一貫性が向上
拡張性: 豊富なアイコンライブラリから選択可能
カスタマイズ性: 色やサイズの調整が容易
ブラウザ互換性: より安定した表示
プロフェッショナル性: ビジネス用途に適した見た目

ケケンタ

アイコンローディングアニメーションは、Webサイトのユーザー体験を向上させる効果的な手法です。FontAwesomeアイコンを使用することで、より統一感のあるデザインを実現できます。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】アイコンクリックアニメーション｜5種類【Web制作】

ケケンタ — Mon, 25 Aug 2025 23:15:41 +0000

ケケンタ

アイコンクリックアニメーションを実装したい……

ケケンタ

クリック時の視覚的フィードバックを作りたい……

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

Web制作において必須のUI要素
アイコンクリックアニメーション

をご紹介します。

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

この記事で紹介するアイコンクリックアニメーション

スケール効果（クリック時の拡大/縮小）
カラー効果（クリック時の色変化）
リップル効果（クリック時の波紋）
ローテーション効果（クリック時の回転）
シャドウ効果（クリック時の影変化）

ケケンタ

特にボタンやインタラクティブ要素には、アイコンクリックアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

アイコンクリックアニメーションとは

アイコンクリックアニメーションは、クリック時にアイコンに動的な効果を与えることで、視覚的フィードバックとユーザビリティ向上を実現するアニメーション効果です。ユーザーの操作に対する明確な反応を提供し、インタラクション促進を実現する効果的な手法です。

効果的な使用場面

適している場面

ボタンやリンク
インタラクティブ要素
フォーム送信ボタン
ダウンロードボタン
お問い合わせボタン
ソーシャルシェアボタン

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
スケール効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
カラー効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
リップル効果	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
ローテーション効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
シャドウ効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

スケール効果

アイコンがクリック時に拡大・縮小するアニメーションです。

① デモ

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

このスケール効果の特徴

基本的な拡大・縮小効果
視覚的インパクトが高い
クリック感の演出

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.scale-click-icons {
  display: flex;
  gap: 20px;
}

.scale-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.scale-click-icon:active {
  transform: scale(0.9);
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes scaleClick {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.scale-click-icon.clicked {
  animation: scaleClick 0.3s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale-click-icon');

  // スケールクリックアニメーションクラス
  class ScaleClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.scaleClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    scaleClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ffd700';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 300);
    }
  }

  // アニメーション初期化
  new ScaleClickAnimation(icons);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale-click-icon:active {
  transform: scale(0.8);
}

/* スケール速度の調整 */
.scale-click-icon {
  transition: all 0.1s ease;
}

/* スケール時の影効果 */
.scale-click-icon:active {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

カラー効果

アイコンの色がクリック時に変化するアニメーションです。

① デモ

See the Pen アイコンクリックカラー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカラー効果の特徴

シンプルな色変化
視覚的インパクトが高い
状態変化の明確化

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.color-click-icons {
  display: flex;
  gap: 20px;
}

.color-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.color-click-icon:active {
  color: #ff6b6b;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

/* アニメーション効果 */
@keyframes colorClick {
  0% {
    color: white;
  }
  50% {
    color: #ff6b6b;
  }
  100% {
    color: white;
  }
}

.color-click-icon.clicked {
  animation: colorClick 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.color-click-icon');

  // カラークリックアニメーションクラス
  class ColorClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.colorClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    colorClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ff6b6b';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 500);
    }
  }

  // アニメーション初期化
  new ColorClickAnimation(icons);
});

⑤ カスタマイズ例

/* 色変化の調整 */
.color-click-icon:active {
  color: #00d2ff;
}

/* 色変化速度の調整 */
.color-click-icon {
  transition: all 0.2s ease;
}

/* 色変化時のスケール効果 */
.color-click-icon:active {
  transform: scale(1.2);
}

リップル効果

アイコンにクリック時に波紋が広がるアニメーションです。

① デモ

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

このリップル効果の特徴

波紋の動的な広がり
視覚的インパクトが高い
インタラクティブな印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.ripple-click-icons {
  display: flex;
  gap: 20px;
}

.ripple-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.ripple-click-icon:active {
  color: #00d2ff;
  transform: scale(1.1);
}

.ripple-click-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-click-icon.ripple::after {
  width: 100px;
  height: 100px;
}

/* アニメーション効果 */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.ripple-click-icon.ripple::after {
  animation: ripple 0.6s ease-out;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.ripple-click-icon');

  // リップルクリックアニメーションクラス
  class RippleClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', (e) => {
          this.rippleClick(icon, e);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rippleClick(icon, e) {
      icon.classList.add('ripple');
      icon.style.color = '#00d2ff';

      setTimeout(() => {
        icon.classList.remove('ripple');
        icon.style.color = 'white';
      }, 600);
    }
  }

  // アニメーション初期化
  new RippleClickAnimation(icons);
});

⑤ カスタマイズ例

/* リップルの色変更 */
.ripple-click-icon::after {
  background: rgba(255, 107, 107, 0.6);
}

/* リップルの速度調整 */
.ripple-click-icon::after {
  transition: width 0.8s, height 0.8s;
}

/* リップルのサイズ調整 */
.ripple-click-icon.ripple::after {
  width: 120px;
  height: 120px;
}

ローテーション効果

アイコンがクリック時に回転するアニメーションです。

① デモ

See the Pen アイコンクリックローテーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーション効果の特徴

動的な回転動き
視覚的インパクトが高い
クリック感の演出

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.rotate-click-icons {
  display: flex;
  gap: 20px;
}

.rotate-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.4s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.rotate-click-icon:active {
  transform: rotate(180deg);
  color: #ff6b6b;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes rotateClick {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.rotate-click-icon.clicked {
  animation: rotateClick 0.4s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotate-click-icon');

  // ローテーションクリックアニメーションクラス
  class RotateClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.rotateClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rotateClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ff6b6b';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 400);
    }
  }

  // アニメーション初期化
  new RotateClickAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate-click-icon:active {
  transform: rotateX(180deg);
}

/* 回転速度の調整 */
.rotate-click-icon {
  transition: all 0.6s ease;
}

/* 回転時の影効果 */
.rotate-click-icon:active {
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

シャドウ効果

アイコンの影がクリック時に変化するアニメーションです。

① デモ

See the Pen アイコンクリックシャドウ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このシャドウ効果の特徴

立体的な影の変化
奥行きのある表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.shadow-click-icons {
  display: flex;
  gap: 20px;
}

.shadow-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.shadow-click-icon:active {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  color: #feca57;
  transform: translateY(-3px);
}

/* アニメーション効果 */
@keyframes shadowClick {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

.shadow-click-icon.clicked {
  animation: shadowClick 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.shadow-click-icon');

  // シャドウクリックアニメーションクラス
  class ShadowClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.shadowClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 250);
      });
    }

    shadowClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#feca57';
      icon.style.transform = 'translateY(-3px)';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
        icon.style.transform = 'translateY(0)';
      }, 500);
    }
  }

  // アニメーション初期化
  new ShadowClickAnimation(icons);
});

⑤ カスタマイズ例

/* 影の強度調整 */
.shadow-click-icon:active {
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

/* 影の速度調整 */
.shadow-click-icon {
  transition: all 0.5s ease;
}

/* 影の色変更 */
.shadow-click-icon:active {
  text-shadow: 0 8px 16px rgba(255, 107, 107, 0.6);
}

まとめ

今回ご紹介した5種類のアイコンクリックアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

ボタン: スケール効果・カラー効果
インタラクティブ要素: リップル効果・ローテーション効果
機能アイコン: シャドウ効果

実装のポイント

パフォーマンスを考慮: 軽量で滑らかなアニメーション
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 主要ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

ケケンタ

アイコンクリックアニメーションは、Webサイトのインタラクション性を向上させる効果的な手法です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい