チェックボックス – ケケンタの独学ITブログ

【Web制作】フォーム・入力アニメーション完全ガイド｜4カテゴリ・22種類を網羅

ケケンタ — Tue, 12 Aug 2025 05:35:38 +0000

Webサイトのフォームを魅力的で使いやすくするフォーム・入力アニメーションを4カテゴリ・22種類完全網羅！

ケケンタ

各カテゴリから厳選した代表的なアニメーションをCodePenデモ付きで紹介し、詳細な実装方法は各専門記事で詳しく解説しています。

フォーム・入力アニメーション完全カタログ

1. 入力フォームアニメーション【7種類】

テキスト入力時の視覚的フィードバックを提供するアニメーション効果

代表アニメーション：ラベル浮上効果

See the Pen 入力フィールドラベル浮上効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカテゴリーの特徴

ラベル浮上効果（プレースホルダーがラベルとして浮上）
ボーダー変化効果（枠線の色・太さ変化）
背景変化効果（背景色の変化）
シャドウ効果（影の変化）
スケール効果（微細な拡大/縮小）
カラー効果（文字色の変化）
フォーカス効果

詳細ページはこちら

【コピペOK】入力フォームアニメーション｜7種類【Web制作】

2. バリデーションアニメーション【6種類】

入力値の検証結果を視覚的に表現するアニメーション効果

代表アニメーション：シェイク効果

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

このカテゴリーの特徴

シェイク効果（揺れる効果）
パルス効果（脈動効果）
スライド効果（スライドイン）
フェード効果（フェードイン）
カラー変化効果（色の変化）
アイコン表示効果

詳細ページはこちら

【コピペOK】バリデーションアニメーション｜6種類【Web制作】

3. チェックボックス・スイッチアニメーション【5種類】

選択肢の状態変化を美しく表現するアニメーション効果

代表アニメーション：スライドスイッチ

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

このカテゴリーの特徴

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

詳細ページはこちら

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

4. ボタン・送信系アニメーション【4種類】

フォーム送信時の状態変化を表現するアニメーション効果

代表アニメーション：ローディング効果

See the Pen 【ボタン・送信】ローディング by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカテゴリーの特徴

ローディング（スピナーやプログレスバー）
サクセス（成功時のアニメーション）
エラー（エラー時の振動）
ディセーブル（無効化時の変化）

詳細ページはこちら

【コピペOK】ボタン・送信系アニメーション｜4種類【Web制作】

用途別おすすめアニメーション

アニメーション効果の比較表

カテゴリ	視覚的インパクト	実装難易度	パフォーマンス	ブラウザ対応
入力フォーム	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
バリデーション	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
チェックボックス・スイッチ	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ボタン・送信系	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

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

スライダー

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

特殊効果

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

まとめ

フォーム・入力アニメーションは、Webサイトのユーザビリティと視覚的満足度を向上させる重要な要素です。

今回紹介した4カテゴリ・22種類のアニメーションから、ご自身のプロジェクトに最適なものを選択しましょう。

ケケンタ

各専門記事では、詳細な実装方法、カスタマイズ例、パフォーマンス最適化のコツまで詳しく解説しています。ぜひ各記事を読んで、使いやすく魅力的なフォーム・入力アニメーションを実装してみてください！

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

ケケンタ — Fri, 08 Aug 2025 22:10:02 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

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

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

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

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

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

スライドスイッチ

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

① デモ

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

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

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

② HTML

③ 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


  
    
      
      
      利用規約に同意する
    
  

  
    
      
      
      ニュースレターを購読する
    
  

  
    
      
      
      プライバシーポリシーに同意する

③ 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


  
    
      
      
      機能Aを有効にする
    
  

  
    
      
      
      機能Bを有効にする
    
  

  
    
      
      
      機能Cを有効にする

③ 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


  
    
      
      
      設定を保存する
    
  

  
    
      
      
      自動同期を有効にする
    
  

  
    
      
      
      バックアップを作成する

③ 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

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

まとめ

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

用途別おすすめ

設定画面: スライドスイッチ・バウンススイッチ
フォーム: フェードチェックボックス・スケールチェックボックス
同期/保存/モード切り替え: ローテーションチェックボックス・スライドスイッチ

実装のポイント

ユーザビリティを重視: 直感的な操作を可能に
パフォーマンスを考慮: 軽量なアニメーション
ブラウザ対応: 幅広いブラウザで動作するように
アクセシビリティ: キーボードナビや読み上げ対応を意識

ケケンタ

チェックボックス・スイッチアニメーションは、UIの操作性と満足度を高める重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

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

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

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

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

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

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

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

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

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

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

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

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

スライダー

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

特殊効果

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

チェックボックス – ケケンタの独学ITブログ

【Web制作】フォーム・入力アニメーション完全ガイド｜4カテゴリ・22種類を網羅

フォーム・入力アニメーション完全カタログ

1. 入力フォームアニメーション【7種類】

2. バリデーションアニメーション【6種類】

3. チェックボックス・スイッチアニメーション【5種類】

4. ボタン・送信系アニメーション【4種類】

用途別おすすめアニメーション

ログイン・サインアップフォーム向け

お問い合わせフォーム向け

設定画面向け

検索フォーム向け

アニメーション効果の比較表

関連記事

基本的なアニメーション

スクロール系

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

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果

まとめ

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

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

効果的な使用場面

実装方法の比較

スライドスイッチ

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

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

① デモ

② HTML

③ CSS

④ カスタマイズ例

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

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

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

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

バウンススイッチ

① デモ

② HTML

バウンススイッチ

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

用途別おすすめ

実装のポイント

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

関連記事

基本的なアニメーション

スクロール系

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

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果