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

【コピペOK】チェックボックス・スイッチアニメーション｜5種類【Web制作】

2025-08-092025-08-10

ケケンタ

チェックボックスやスイッチのアニメーションを実装したい……

ケケンタ

ON/OFFの状態をわかりやすく見せたい……

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

Web制作において必須のUI要素
チェックボックス・スイッチアニメーション

をご紹介します。

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

この記事で紹介するチェックボックス・スイッチアニメーション

スライドスイッチ（横方向のスライド）
フェードチェックボックス（透明度変化）
スケールチェックボックス（拡大/縮小）
ローテーションチェックボックス（回転）
バウンススイッチ（弾む動き）

ケケンタ

特に設定画面やフォームの項目切り替え、ダークモード切り替えなどには、チェックボックス・スイッチアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

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

あわせて読みたい

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

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

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

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

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

created by Rinker

¥1,399 (2025/08/11 08:44:57時点 Amazon調べ-詳細)

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

チェックボックス・スイッチアニメーションとは

チェックボックスやスイッチのアニメーションは、ユーザーの操作に対する視覚的なフィードバックを提供し、UIの使いやすさを向上させるアニメーション効果です。

効果的な使用場面

適している場面

フォームの設定項目
設定画面
フィルター機能
ダークモード切り替え
通知設定

避けるべき場面

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

実装方法の比較

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

スライドスイッチ

横方向のスライドでON/OFFを切り替えるアニメーションです。

① デモ

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

このスライドスイッチの特徴

シンプルで直感的
状態変化が分かりやすい
実装が軽量

② HTML

<div class="form-container">
  <div class="switch-container">
    <label class="slide-switch">
      <input type="checkbox" id="slide-switch-1">
      <span class="switch-slider"></span>
      <span class="switch-label">通知を有効にする</span>
    </label>
  </div>

  <div class="switch-container">
    <label class="slide-switch">
      <input type="checkbox" id="slide-switch-2">
      <span class="switch-slider"></span>
      <span class="switch-label">ダークモード</span>
    </label>
  </div>

  <div class="switch-container">
    <label class="slide-switch">
      <input type="checkbox" id="slide-switch-3">
      <span class="switch-slider"></span>
      <span class="switch-label">自動保存</span>
    </label>
  </div>
</div>

③ CSS

/* スライドスイッチのスタイル */
.slide-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 10px 0;
}

.slide-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: relative;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slide-switch input[type="checkbox"]:checked + .switch-slider {
  background-color: #4CAF50;
}

.slide-switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(26px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.slide-switch input[type="checkbox"]:focus + .switch-slider {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.switch-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* ホバー効果 */
.slide-switch:hover .switch-slider {
  background-color: #b0b0b0;
}

.slide-switch:hover input[type="checkbox"]:checked + .switch-slider {
  background-color: #45a049;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const slideSwitches = document.querySelectorAll('.slide-switch input[type="checkbox"]');

  slideSwitches.forEach(input => {
    // フォーカス時の処理
    input.addEventListener('focus', function() {
      this.parentElement.classList.add('focused');
    });

    // ブラー時の処理
    input.addEventListener('blur', function() {
      this.parentElement.classList.remove('focused');
    });

    // 変更時の処理（任意のフック）
    input.addEventListener('change', function() {
      if (this.checked) {
        this.parentElement.classList.add('is-on');
      } else {
        this.parentElement.classList.remove('is-on');
      }
    });
  });
});

⑤ カスタマイズ例

/* カラーテーマの変更 */
.slide-switch input[type="checkbox"]:checked + .switch-slider {
  background-color: #2196F3; /* 青色テーマ */
}

/* サイズの変更 */
.switch-slider {
  width: 60px; /* より大きなスイッチ */
  height: 30px;
}

.switch-slider::before {
  width: 26px;
  height: 26px;
}

.slide-switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(30px);
}

/* アニメーション速度の変更 */
.switch-slider,
.switch-slider::before {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

フェードチェックボックス

透明度の変化で状態を伝える軽量なアニメーションです。

① デモ

See the Pen フェードチェックボックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードチェックボックスの特徴

軽量でなめらか
どのデザインにも馴染む
実装が簡単

② HTML

<div class="form-container">
  <div class="checkbox-container">
    <label class="fade-checkbox">
      <input type="checkbox" id="fade-checkbox-1">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">利用規約に同意する</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="fade-checkbox">
      <input type="checkbox" id="fade-checkbox-2">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">ニュースレターを購読する</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="fade-checkbox">
      <input type="checkbox" id="fade-checkbox-3">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">プライバシーポリシーに同意する</span>
    </label>
  </div>
</div>

③ CSS

/* フェードチェックボックスのスタイル */
.fade-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 10px 0;
}

.fade-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.3s ease;
  background-color: white;
}

.checkbox-custom::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #4CAF50;
  border-color: #4CAF50;
  transform: scale(1.1);
}

.fade-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
  opacity: 1;
}

.fade-checkbox input[type="checkbox"]:focus + .checkbox-custom {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.checkbox-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* ホバー効果 */
.fade-checkbox:hover .checkbox-custom {
  border-color: #4CAF50;
  transform: scale(1.05);
}

.fade-checkbox:hover input[type="checkbox"]:checked + .checkbox-custom {
  transform: scale(1.15);
}

④ カスタマイズ例

/* カスタムアイコンの使用 */
.checkbox-custom::after {
  content: "★"; /* チェックマークの代わりに星マーク */
  color: white;
  font-size: 12px;
}

/* グラデーション背景 */
.fade-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border-color: #4CAF50;
}

/* より大きなサイズ */
.checkbox-custom {
  width: 24px;
  height: 24px;
}

.checkbox-custom::after {
  font-size: 16px;
}

スケールチェックボックス

拡大縮小で選択の強調を行う視認性の高いアニメーションです。

① デモ

See the Pen スケールチェックボックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールチェックボックスの特徴

変化が分かりやすい
強調度を調整しやすい
ブランドカラーと相性が良い

② HTML

<div class="form-container">
  <div class="checkbox-container">
    <label class="scale-checkbox">
      <input type="checkbox" id="scale-checkbox-1">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">機能Aを有効にする</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="scale-checkbox">
      <input type="checkbox" id="scale-checkbox-2">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">機能Bを有効にする</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="scale-checkbox">
      <input type="checkbox" id="scale-checkbox-3">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">機能Cを有効にする</span>
    </label>
  </div>
</div>

③ CSS

/* スケールチェックボックスのスタイル */
.scale-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 10px 0;
}

.scale-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid #ddd;
  border-radius: 6px;
  margin-right: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: white;
  transform-origin: center;
}

.checkbox-custom::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: white;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.scale-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #FF6B6B;
  border-color: #FF6B6B;
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.scale-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

.scale-checkbox input[type="checkbox"]:focus + .checkbox-custom {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
}

.checkbox-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* ホバー効果 */
.scale-checkbox:hover .checkbox-custom {
  transform: scale(1.1);
  border-color: #FF6B6B;
}

.scale-checkbox:hover input[type="checkbox"]:checked + .checkbox-custom {
  transform: scale(1.3);
}

.scale-checkbox:hover .checkbox-label {
  color: #FF6B6B;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const scaleCheckboxes = document.querySelectorAll('.scale-checkbox input[type="checkbox"]');

  scaleCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const label = this.parentElement.querySelector('.checkbox-label');
      const customCheckbox = this.parentElement.querySelector('.checkbox-custom');

      if (this.checked) {
        console.log(`${label.textContent}が有効になりました`);
        // 追加のアニメーション効果
        customCheckbox.style.animation = 'pulse 0.6s ease';
      } else {
        console.log(`${label.textContent}が無効になりました`);
      }
    });
  });
});

// パルスアニメーション
const style = document.createElement('style');
style.textContent = `
  @keyframes pulse {
    0% { transform: scale(1.2); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.2); }
  }
`;
document.head.appendChild(style);

⑤ カスタマイズ例

/* 異なるカラーテーマ */
.scale-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

/* より大きなスケール効果 */
.scale-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  transform: scale(1.5);
}

/* カスタムアイコン */
.checkbox-custom::after {
  content: "♥";
  font-size: 12px;
}

ローテーションチェックボックス

回転でトグルを印象づける個性的なアニメーションです。

① デモ

See the Pen ローテーションチェックボックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーションチェックボックスの特徴

ユニークで目を引く
状態変化の達成感がある
モーションの表現幅が広い

② HTML

<div class="form-container">
  <div class="checkbox-container">
    <label class="rotate-checkbox">
      <input type="checkbox" id="rotate-checkbox-1">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">設定を保存する</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="rotate-checkbox">
      <input type="checkbox" id="rotate-checkbox-2">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">自動同期を有効にする</span>
    </label>
  </div>

  <div class="checkbox-container">
    <label class="rotate-checkbox">
      <input type="checkbox" id="rotate-checkbox-3">
      <span class="checkbox-custom"></span>
      <span class="checkbox-label">バックアップを作成する</span>
    </label>
  </div>
</div>

③ CSS

/* ローテーションチェックボックスのスタイル */
.rotate-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 10px 0;
}

.rotate-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-radius: 50%;
  margin-right: 12px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background-color: white;
  transform-origin: center;
}

.checkbox-custom::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-180deg) scale(0);
  color: white;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rotate-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background-color: #9C27B0;
  border-color: #9C27B0;
  transform: rotate(360deg);
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
}

.rotate-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.rotate-checkbox input[type="checkbox"]:focus + .checkbox-custom {
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.3);
}

.checkbox-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* ホバー効果 */
.rotate-checkbox:hover .checkbox-custom {
  transform: rotate(180deg);
  border-color: #9C27B0;
}

.rotate-checkbox:hover input[type="checkbox"]:checked + .checkbox-custom {
  transform: rotate(540deg);
}

.rotate-checkbox:hover .checkbox-label {
  color: #9C27B0;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const rotateCheckboxes = document.querySelectorAll('.rotate-checkbox input[type="checkbox"]');

  rotateCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const label = this.parentElement.querySelector('.checkbox-label');
      const customCheckbox = this.parentElement.querySelector('.checkbox-custom');

      if (this.checked) {
        console.log(`${label.textContent}が有効になりました`);
        // 追加の回転アニメーション
        customCheckbox.style.animation = 'rotateBounce 0.8s ease';
      } else {
        console.log(`${label.textContent}が無効になりました`);
      }
    });
  });
});

// バウンス回転アニメーション
const style = document.createElement('style');
style.textContent = `
  @keyframes rotateBounce {
    0% { transform: rotate(360deg) scale(1); }
    50% { transform: rotate(540deg) scale(1.2); }
    100% { transform: rotate(720deg) scale(1); }
  }
`;
document.head.appendChild(style);

⑤ カスタマイズ例

/* 異なる回転方向 */
.rotate-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  transform: rotate(-360deg);
}

/* カスタムアイコン */
.checkbox-custom::after {
  content: "★";
  font-size: 12px;
}

/* より複雑な回転パターン */
.rotate-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  animation: complexRotate 0.6s ease;
}

@keyframes complexRotate {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1.2); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

バウンススイッチ

弾むような動きで楽しく親しみやすいトグルを実現するアニメーションです。

① デモ

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

このバウンススイッチの特徴

UIに動きを加えやすい
楽しく親しみやすい
変化が明快

② HTML

<div class="form-container">
  <h3>バウンススイッチ</h3>

  <div class="switch-container">
    <label class="bounce-switch">
      <input type="checkbox" id="bounce-switch-1">
      <span class="switch-slider"></span>
      <span class="switch-label">音声通知</span>
    </label>
  </div>

  <div class="switch-container">
    <label class="bounce-switch">
      <input type="checkbox" id="bounce-switch-2">
      <span class="switch-slider"></span>
      <span class="switch-label">振動通知</span>
    </label>
  </div>

  <div class="switch-container">
    <label class="bounce-switch">
      <input type="checkbox" id="bounce-switch-3">
      <span class="switch-slider"></span>
      <span class="switch-label">プッシュ通知</span>
    </label>
  </div>
</div>

③ CSS

/* バウンススイッチのスタイル */
.bounce-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 10px 0;
}

.bounce-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: relative;
  width: 56px;
  height: 28px;
  background-color: #ddd;
  border-radius: 28px;
  transition: background-color 0.3s ease;
  margin-right: 12px;
  overflow: hidden;
}

.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bounce-switch input[type="checkbox"]:checked + .switch-slider {
  background-color: #FF9800;
}

.bounce-switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(28px);
  animation: bounce 0.6s ease;
}

.bounce-switch input[type="checkbox"]:focus + .switch-slider {
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
}

.switch-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* バウンスアニメーション */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(28px) scale(1);
  }
  40% {
    transform: translateX(28px) scale(1.2);
  }
  60% {
    transform: translateX(28px) scale(0.9);
  }
}

/* ホバー効果 */
.bounce-switch:hover .switch-slider {
  background-color: #ccc;
}

.bounce-switch:hover input[type="checkbox"]:checked + .switch-slider {
  background-color: #F57C00;
}

.bounce-switch:hover .switch-label {
  color: #FF9800;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const bounceSwitches = document.querySelectorAll('.bounce-switch input[type="checkbox"]');

  bounceSwitches.forEach(switchInput => {
    switchInput.addEventListener('change', function() {
      const label = this.parentElement.querySelector('.switch-label');
      const slider = this.parentElement.querySelector('.switch-slider');

      if (this.checked) {
        console.log(`${label.textContent}が有効になりました`);
        // 追加のバウンス効果
        slider.style.animation = 'switchBounce 0.8s ease';
      } else {
        console.log(`${label.textContent}が無効になりました`);
        // 逆方向のバウンス効果
        slider.style.animation = 'switchBounceReverse 0.8s ease';
      }
    });
  });
});

// スイッチ全体のバウンスアニメーション
const style = document.createElement('style');
style.textContent = `
  @keyframes switchBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  @keyframes switchBounceReverse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
  }
`;
document.head.appendChild(style);

⑤ カスタマイズ例

/* より大きなバウンス効果 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(28px) scale(1);
  }
  40% {
    transform: translateX(28px) scale(1.4);
  }
  60% {
    transform: translateX(28px) scale(0.8);
  }
}

/* グラデーション背景 */
.bounce-switch input[type="checkbox"]:checked + .switch-slider {
  background: linear-gradient(45deg, #FF9800, #FF5722);
}

/* カスタムサイズ */
.switch-slider {
  width: 64px;
  height: 32px;
}

.switch-slider::before {
  width: 28px;
  height: 28px;
}

.bounce-switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(32px);
}