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

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

2025-08-27

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

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

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

FontAwesomeの読み込み

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

スケール効果

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

① デモ

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

このスケール効果の特徴

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

② HTML

<div class="icon-container">
  <div class="scale-icons">
    <i class="fas fa-heart scale-icon"></i>
    <i class="fas fa-star scale-icon"></i>
    <i class="fas fa-gem scale-icon"></i>
    <i class="fas fa-diamond scale-icon"></i>
  </div>
</div>

③ 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

<div class="icon-container">
  <div class="rotate-icons">
    <i class="fas fa-cog rotate-icon"></i>
    <i class="fas fa-sync-alt rotate-icon"></i>
    <i class="fas fa-bullseye rotate-icon"></i>
    <i class="fas fa-star rotate-icon"></i>
  </div>
</div>

③ 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

<div class="icon-container">
  <div class="color-icons">
    <i class="fas fa-heart color-icon"></i>
    <i class="fas fa-heartbeat color-icon"></i>
    <i class="fas fa-gem color-icon"></i>
    <i class="fas fa-diamond color-icon"></i>
  </div>
</div>

③ 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

<div class="icon-container">
  <div class="shadow-icons">
    <i class="fas fa-crystal-ball shadow-icon"></i>
    <i class="fas fa-gem shadow-icon"></i>
    <i class="fas fa-star shadow-icon"></i>
    <i class="fas fa-sparkles shadow-icon"></i>
  </div>
</div>

③ 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

<div class="icon-container">
  <div class="border-icons">
    <i class="fas fa-heart border-icon"></i>
    <i class="fas fa-star border-icon"></i>
    <i class="fas fa-gem border-icon"></i>
    <i class="fas fa-diamond border-icon"></i>
  </div>
</div>

③ 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);
}