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

【コピペOK】メニューアクティブ状態アニメーション完全ガイド｜5種類

2025-07-31

ケケンタ

メニューのアクティブ状態にアニメーション効果を追加したい……

ケケンタ

現在の選択状態をより魅力的に表示したい……

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

Web制作において必須のUI要素
メニューのアクティブ状態アニメーション

をご紹介します。

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

この記事で紹介するアクティブ状態アニメーション

スライド効果（スライドイン/アウト）
フェード効果（フェードイン/アウト）
スケール効果（スケールイン/アウト）
ズーム効果（ズームイン/アウト）
フリップ効果（フリップイン/アウト）

ケケンタ

特にナビゲーションや選択状態の表示には、アクティブ状態アニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

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

あわせて読みたい

【コピペOK】タブ切り替えアニメーション完全ガイド｜6種類の実装方法

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

【完全版】メニューアニメーション完全ガイド【8カテゴリ・40種類を網羅】

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

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

created by Rinker

¥2,800 (2025/7/31 22:29:56時点 Amazon調べ-詳細)

動くWebデザインアイディア帳　実践編

created by Rinker

¥2,599 (2025/7/31 22:30:48時点 Amazon調べ-詳細)

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

¥3,000 (2025/07/31 20:43:57時点 Amazon調べ-詳細)

アクティブ状態アニメーションとは

アクティブ状態アニメーションは、現在選択されている要素を視覚的に表現するアニメーション効果です。ユーザーに現在の位置を分かりやすく伝え、インタラクティブな体験を提供する効果的な手法です。

効果的な使用場面

適している場面

ナビゲーションメニュー
タブ選択
ボタン選択
フォーム選択
リスト選択

避けるべき場面

即座に反応が必要な場面
ユーザーが操作を中断できない場面
アクセシビリティを重視する場面

実装方法の比較

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

スライド効果

① デモ

See the Pen アクティブ状態スライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的なスライド表現
視覚的インパクトが高い
スムーズなアニメーション

② HTML

<div class="nav-container">
  <nav class="slide-nav">
    <a href="#" class="nav-item active" data-tab="home">
      <span class="nav-text">ホーム</span>
      <div class="slide-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="about">
      <span class="nav-text">概要</span>
      <div class="slide-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="services">
      <span class="nav-text">サービス</span>
      <div class="slide-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="contact">
      <span class="nav-text">お問い合わせ</span>
      <div class="slide-indicator"></div>
    </a>
  </nav>
</div>

③ CSS

/* ナビゲーションコンテナ */
.nav-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* スライドナビゲーション */
.slide-nav {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  position: relative;
}

.nav-item {
  flex: 1;
  text-decoration: none;
  color: #666;
  padding: 12px 16px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: #4CAF50;
}

/* スライドインジケーター */
.slide-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #4CAF50;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.nav-item.active .slide-indicator {
  transform: translateY(0);
}

/* スライドアニメーション */
@keyframes slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.nav-item');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      // アクティブ状態の更新
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');

      // タブの切り替え処理（必要に応じて）
      const tabName = this.getAttribute('data-tab');
      console.log('Selected tab:', tabName);
    });
  });
});

⑤ カスタマイズ例

/* スライド方向の変更 */
.slide-indicator {
  transform: translateY(100%);
}

.nav-item.active .slide-indicator {
  transform: translateY(0);
}

/* スライド速度の調整 */
.slide-indicator {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* カラーテーマの変更 */
.nav-item.active {
  color: #2196F3;
}

.slide-indicator {
  background: #2196F3;
}

フェード効果

① デモ

See the Pen アクティブ状態フェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

スムーズな表示・非表示
視覚的に優しい印象
高パフォーマンス

② HTML

<div class="nav-container">
  <nav class="fade-nav">
    <a href="#" class="nav-item active" data-tab="home">
      <span class="nav-text">ホーム</span>
      <div class="fade-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="about">
      <span class="nav-text">概要</span>
      <div class="fade-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="services">
      <span class="nav-text">サービス</span>
      <div class="fade-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="contact">
      <span class="nav-text">お問い合わせ</span>
      <div class="fade-indicator"></div>
    </a>
  </nav>
</div>

③ CSS

/* フェードナビゲーション */
.fade-nav {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  position: relative;
}

.nav-item {
  flex: 1;
  text-decoration: none;
  color: #666;
  padding: 12px 16px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: #FF9800;
}

/* フェードインジケーター */
.fade-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #FF9800;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.nav-item.active .fade-indicator {
  opacity: 1;
}

/* フェードアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.nav-item');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      // アクティブ状態の更新
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');

      // タブの切り替え処理（必要に応じて）
      const tabName = this.getAttribute('data-tab');
      console.log('Selected tab:', tabName);
    });
  });
});

⑤ カスタマイズ例

/* フェード効果の強度調整 */
.fade-indicator {
  opacity: 0;
  transform: scale(0.8);
}

.nav-item.active .fade-indicator {
  opacity: 1;
  transform: scale(1);
}

/* フェード速度の調整 */
.fade-indicator {
  transition: all 0.6s ease;
}

スケール効果

① デモ

See the Pen アクティブ状態スケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

拡大・縮小による動的表現
視覚的なインパクト
モダンな印象

② HTML

<div class="nav-container">
  <nav class="scale-nav">
    <a href="#" class="nav-item active" data-tab="home">
      <span class="nav-text">ホーム</span>
      <div class="scale-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="about">
      <span class="nav-text">概要</span>
      <div class="scale-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="services">
      <span class="nav-text">サービス</span>
      <div class="scale-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="contact">
      <span class="nav-text">お問い合わせ</span>
      <div class="scale-indicator"></div>
    </a>
  </nav>
</div>

③ CSS

/* スケールナビゲーション */
.scale-nav {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  position: relative;
}

.nav-item {
  flex: 1;
  text-decoration: none;
  color: #666;
  padding: 12px 16px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: #9C27B0;
}

/* スケールインジケーター */
.scale-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #9C27B0;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.nav-item.active .scale-indicator {
  transform: scaleX(1);
}

/* スケールアニメーション */
@keyframes scaleIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes scaleOut {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.nav-item');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      // アクティブ状態の更新
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');

      // タブの切り替え処理（必要に応じて）
      const tabName = this.getAttribute('data-tab');
      console.log('Selected tab:', tabName);
    });
  });
});

⑤ カスタマイズ例

/* スケール効果の強度調整 */
.scale-indicator {
  transform: scaleX(0.5);
}

.nav-item.active .scale-indicator {
  transform: scaleX(1.1);
}

/* スケール速度の調整 */
.scale-indicator {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

ズーム効果

① デモ

See the Pen アクティブ状態ズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的インパクトが高い
注目を集める効果

② HTML

<div class="nav-container">
  <nav class="zoom-nav">
    <a href="#" class="nav-item active" data-tab="home">
      <span class="nav-text">ホーム</span>
      <div class="zoom-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="about">
      <span class="nav-text">概要</span>
      <div class="zoom-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="services">
      <span class="nav-text">サービス</span>
      <div class="zoom-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="contact">
      <span class="nav-text">お問い合わせ</span>
      <div class="zoom-indicator"></div>
    </a>
  </nav>
</div>

③ CSS

/* ズームナビゲーション */
.zoom-nav {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  position: relative;
}

.nav-item {
  flex: 1;
  text-decoration: none;
  color: #666;
  padding: 12px 16px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: #E91E63;
}

/* ズームインジケーター */
.zoom-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #E91E63;
  transform: scaleX(0.8);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.nav-item.active .zoom-indicator {
  transform: scaleX(1);
  opacity: 1;
}

/* ズームアニメーション */
@keyframes zoomIn {
  from {
    transform: scaleX(0.5);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(1.2);
    opacity: 0;
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.nav-item');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      // アクティブ状態の更新
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');

      // タブの切り替え処理（必要に応じて）
      const tabName = this.getAttribute('data-tab');
      console.log('Selected tab:', tabName);
    });
  });
});

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
.zoom-indicator {
  transform: scaleX(0.3);
}

.nav-item.active .zoom-indicator {
  transform: scaleX(1.2);
}

/* ズーム速度の調整 */
.zoom-indicator {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

フリップ効果

① デモ

See the Pen アクティブ状態フリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴

3D的な回転効果
視覚的インパクトが最大
プレミアムな印象

② HTML

<div class="nav-container">
  <nav class="flip-nav">
    <a href="#" class="nav-item active" data-tab="home">
      <span class="nav-text">ホーム</span>
      <div class="flip-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="about">
      <span class="nav-text">概要</span>
      <div class="flip-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="services">
      <span class="nav-text">サービス</span>
      <div class="flip-indicator"></div>
    </a>
    <a href="#" class="nav-item" data-tab="contact">
      <span class="nav-text">お問い合わせ</span>
      <div class="flip-indicator"></div>
    </a>
  </nav>
</div>

③ CSS

/* フリップナビゲーション */
.flip-nav {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  position: relative;
  perspective: 1000px;
}

.nav-item {
  flex: 1;
  text-decoration: none;
  color: #666;
  padding: 12px 16px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: #607D8B;
}

/* フリップインジケーター */
.flip-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #607D8B;
  transform: rotateX(90deg);
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  z-index: 0;
}

.nav-item.active .flip-indicator {
  transform: rotateX(0deg);
}

/* フリップアニメーション */
@keyframes flipIn {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

@keyframes flipOut {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.nav-item');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      // アクティブ状態の更新
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');

      // タブの切り替え処理（必要に応じて）
      const tabName = this.getAttribute('data-tab');
      console.log('Selected tab:', tabName);
    });
  });
});

⑤ カスタマイズ例

/* フリップ軸の変更 */
.flip-indicator {
  transform: rotateX(90deg);
}

.nav-item.active .flip-indicator {
  transform: rotateX(0deg);
}

まとめ

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

用途別おすすめ

ナビゲーション: スライド効果・フェード効果
タブ選択: スケール効果・ズーム効果
プレミアムサイト: フリップ効果

実装のポイント

パフォーマンスを考慮: アニメーションは軽量に
ユーザビリティを重視: 現在位置が分かりやすく
ブラウザ対応: 幅広いブラウザで動作するように
アクセシビリティ: キーボードナビゲーション対応も考慮

ケケンタ

アクティブ状態アニメーションは、ユーザーエクスペリエンスを向上させる重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

【コピペOK】タブ切り替えアニメーション完全ガイド｜6種類の実装方法

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

【完全版】メニューアニメーション完全ガイド【8カテゴリ・40種類を網羅】

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

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

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

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

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

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

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

アニメーション基礎知識

スクロールアニメーション

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

【完全版】メニューアニメーション完全ガイド｜8カテゴリ・40種類

タブ

フォーム・UI要素

ボタンホバーアニメーション

スライダー

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

特殊効果

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

この記事が気に入ったら
フォローしてね！

Follow @kekenta_it

この記事が良いと思ったらシェアしてね！

【コピペOK】メニューアクティブ状態アニメーション完全ガイド｜5種類

アクティブ状態アニメーションとは

効果的な使用場面

実装方法の比較

スライド効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

フェード効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケール効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

ズーム効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

フリップ効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

用途別おすすめ

実装のポイント

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

関連記事

アニメーション基礎知識

スクロールアニメーション

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

タブ

フォーム・UI要素

ボタンホバーアニメーション

スライダー

特殊効果

関連記事

コメント

コメントする コメントをキャンセル

無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】

【PHP】エックスサーバーへデプロイする方法【初心者でも簡単！】

PHPはこうして習得した！約１年間の勉強内容【プログラミング独学】

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】

基本情報技術者試験｜新制度合格者が考える科目A・科目B対策

コメントするコメントをキャンセル