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

【コピペOK】ハンバーガーボタンアニメーション完全ガイド｜5種類

2025-07-16

ケケンタ

ハンバーガーボタンのアニメーションを実装したい……

ケケンタ

3本の線がXに変化するアニメーションを作りたい……

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

Web制作において必須のUI要素
ハンバーガーボタンのアニメーション

をご紹介します。

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

この記事で紹介するハンバーガーボタンのアニメーション

基本的なXアニメーション（シンプルで高パフォーマンス）
スライドアニメーション（線がスライドしてXに変化）
ローテーションアニメーション（回転しながらXに変化）
フェードアニメーション（フェードイン/アウトでXに変化）
スケールアニメーション（拡大縮小でXに変化）

特にモバイルファーストのWebサイトやモダンなUIデザインには、ハンバーガーボタンのアニメーションが非常に効果的です。

ケケンタ

この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

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

【コピペOK】背景アニメーション完全ガイド｜5種類【HTML】

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

ハンバーガーボタンのラインアニメーションとは

ハンバーガーボタンのラインアニメーションは、3本の横線がXマークに変化するアニメーション効果です。ユーザーの操作に対する視覚的フィードバックを提供し、UIの使いやすさを向上させる効果的な手法です。

効果的な使用場面

適している場面

モバイルサイトのナビゲーション
レスポンシブWebデザイン
モダンなWebアプリケーション
ダッシュボードや管理画面
ワンぺージサイト

避けるべき場面

デスクトップ専用サイト（ハンバーガーメニュー自体が不要）
アクセシビリティを重視する場面（代替手段が必要）
高齢者向けサイト（認識しにくい場合がある）

実装方法の比較

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

基本的なXアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】Xアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このXアニメーションの特徴

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

② HTML

<button class="hamburger-menu" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

アクセシビリティのためaria-labelを必ず設定してください。

③ CSS

.hamburger-menu {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 遅いアニメーション */
.hamburger-menu.slow .hamburger-line {
  transition: all 0.5s ease-in-out;
}

/* 速いアニメーション */
.hamburger-menu.fast .hamburger-line {
  transition: all 0.2s ease-in-out;
}

/* バウンス効果 */
.hamburger-menu.bounce .hamburger-line {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* カラー変化 */
.hamburger-menu.active .hamburger-line {
  background-color: #ff6b6b;
}

スライドアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】スライドアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドアニメーションの特徴

線がスライドしてXに変化
スムーズな動き
視覚的に分かりやすい

② HTML

<button class="hamburger-menu slide" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

③ CSS

.hamburger-menu.slide {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.slide .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  position: relative;
}

/* スライドアニメーション */
.hamburger-menu.slide.active .hamburger-line:nth-child(1) {
  transform: translateX(-6px)  translateY(6px) rotate(45deg);
}

.hamburger-menu.slide.active .hamburger-line:nth-child(2) {
  transform: translateX(-100%);
  opacity: 0;
}

.hamburger-menu.slide.active .hamburger-line:nth-child(3) {
  transform: translateX(-6px) translateY(-7px) rotate(-45deg);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.slide');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

ローテーションアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】ローテーションアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーションアニメーションの特徴

線が回転しながらXに変化
3D的な動き
視覚的インパクト大

② HTML

<button class="hamburger-menu rotate" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

③ CSS

.hamburger-menu.rotate {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  perspective: 100px;
}

.hamburger-menu.rotate .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* ローテーションアニメーション */
.hamburger-menu.rotate.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}

.hamburger-menu.rotate.active .hamburger-line:nth-child(2) {
  transform: rotate(180deg);
  opacity: 0;
}

.hamburger-menu.rotate.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.rotate');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 360度回転 */
.hamburger-menu.rotate-360.active .hamburger-line:nth-child(1) {
  transform: rotate(405deg) translateY(7px);
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(2) {
  transform: rotate(540deg);
  opacity: 0;
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(3) {
  transform: rotate(315deg) translateY(-7px);
}

/* バウンス回転 */
.hamburger-menu.rotate-bounce .hamburger-line {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

フェードアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】フェードアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードアニメーションの特徴

線がフェードイン/アウトでXに変化
エレガントな動き
シンプルで洗練された印象

② HTML

<button class="hamburger-menu fade" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

③ CSS

.hamburger-menu.fade {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.fade .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  position: relative;
}

/* フェードアニメーション */
.hamburger-menu.fade.active .hamburger-line:nth-child(1) {
  opacity: 0;
  transform: translateY(7px);
}

.hamburger-menu.fade.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.hamburger-menu.fade.active .hamburger-line:nth-child(3) {
  opacity: 0;
  transform: translateY(-7px);
}

/* Xマークの疑似要素 */
.hamburger-menu.fade::before,
.hamburger-menu.fade::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.hamburger-menu.fade::before {
  transform: rotate(45deg);
}

.hamburger-menu.fade::after {
  transform: rotate(-45deg);
}

.hamburger-menu.fade.active::before,
.hamburger-menu.fade.active::after {
  opacity: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.fade');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 段階的フェード */
.hamburger-menu.fade-stagger .hamburger-line {
  transition-delay: 0s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}

/* カラーフェード */
.hamburger-menu.fade-color.active .hamburger-line {
  background-color: transparent;
}

.hamburger-menu.fade-color.active::before,
.hamburger-menu.fade-color.active::after {
  background-color: #ff6b6b;
}

スケールアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】スケールアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールアニメーションの特徴

線が拡大縮小しながらXに変化
動的なスケール効果
視覚的インパクト大

② HTML

<button class="hamburger-menu scale" aria-label="メニューを開く">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

③ CSS

.hamburger-menu.scale {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.scale .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* スケールアニメーション */
.hamburger-menu.scale.active .hamburger-line:nth-child(1) {
  transform: scale(1.3) rotate(45deg) translateY(7px);
}

.hamburger-menu.scale.active .hamburger-line:nth-child(2) {
  transform: scale(0);
  opacity: 0;
}

.hamburger-menu.scale.active .hamburger-line:nth-child(3) {
  transform: scale(1.3) rotate(-45deg) translateY(-7px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.scale');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* バウンススケール */
.hamburger-menu.scale-bounce .hamburger-line {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* オーバースケール */
.hamburger-menu.scale-over .hamburger-line:nth-child(1) {
  transform: scale(1.5) rotate(45deg) translateY(7px);
}

.hamburger-menu.scale-over .hamburger-line:nth-child(3) {
  transform: scale(1.5) rotate(-45deg) translateY(-7px);
}

/* 段階的スケール */
.hamburger-menu.scale-stagger .hamburger-line:nth-child(1) {
  transition-delay: 0s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}