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

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

2025-08-072025-08-10

ケケンタ

入力フィールドにアニメーション効果を追加したい……

ケケンタ

フォームのユーザビリティを向上させたい……

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

Web制作において必須のUI要素
入力フィールドアニメーション

をご紹介します。

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

この記事で紹介する入力フィールドアニメーション

フローティングラベル
ボーダー変化効果（枠線の色・太さ変化）
背景変化効果（背景色の変化）
シャドウ効果
スケール効果（微細な拡大/縮小）
カラー効果（文字色の変化）
フォーカス効果

ケケンタ

特にフォームや検索ボックスには、入力フィールドアニメーションが非常に効果的です。この記事のコードをご活用いただき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調べ-詳細)

入力フィールドアニメーションとは

入力フィールドアニメーションは、ユーザーの入力操作に対する視覚的なフィードバックを提供するアニメーション効果です。ユーザビリティを向上させ、直感的な操作を可能にする効果的な手法です。

効果的な使用場面

適している場面

ログインフォーム
検索ボックス
お問い合わせフォーム
ユーザー登録フォーム
コメント欄
設定画面

避けるべき場面

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

実装方法の比較

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

フローティングラベル

ラベルが入力フィールドの上に浮き上がるアニメーションです。

① デモ

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

このフローティングラベルの特徴

直感的なラベル表示
スペース効率が良い
モダンなデザイン

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="floating-label" class="floating-input" placeholder=" ">
    <label for="floating-label" class="floating-label">お名前</label>
  </div>

  <div class="input-group">
    <input type="email" id="floating-email" class="floating-input" placeholder=" ">
    <label for="floating-email" class="floating-label">メールアドレス</label>
  </div>

  <div class="input-group">
    <textarea id="floating-message" class="floating-input" placeholder=" " rows="4"></textarea>
    <label for="floating-message" class="floating-label">メッセージ</label>
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.floating-input {
  width: 100%;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: transparent;
  transition: all 0.3s ease;
  outline: none;
}

.floating-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 0 8px;
  color: #666;
  font-size: 16px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
  top: 0;
  font-size: 14px;
  color: #667eea;
  transform: translateY(-50%);
}

/* テキストエリア用の調整 */
textarea.floating-input + .floating-label {
  top: 20px;
}

textarea.floating-input:focus + .floating-label,
textarea.floating-input:not(:placeholder-shown) + .floating-label {
  top: 0;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const floatingInputs = document.querySelectorAll('.floating-input');

  floatingInputs.forEach(input => {
    // 初期状態の設定
    if (input.value) {
      input.classList.add('has-value');
    }

    // 入力時の処理
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });

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

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

⑤ カスタマイズ例

/* ラベル浮上の速度調整 */
.floating-label {
  transition: all 0.5s ease;
}

/* ラベル浮上時の色変更 */
.floating-input:focus + .floating-label {
  color: #ff6b6b;
}

/* ラベル浮上時の影効果 */
.floating-input:focus + .floating-label {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ボーダー変化効果

入力フィールドの枠線が動的に変化するアニメーションです。

① デモ

See the Pen 入力フィールドボーダー変化効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このボーダー変化効果の特徴

視覚的なフィードバック
直感的な状態表示
モダンな印象

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="border-input" class="border-input" placeholder="お名前を入力">
    <div class="border-line"></div>
  </div>

  <div class="input-group">
    <input type="email" id="border-email" class="border-input" placeholder="メールアドレスを入力">
    <div class="border-line"></div>
  </div>

  <div class="input-group">
    <input type="password" id="border-password" class="border-input" placeholder="パスワードを入力">
    <div class="border-line"></div>
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.border-input {
  width: 100%;
  padding: 16px 12px;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  font-size: 16px;
  background: transparent;
  transition: all 0.3s ease;
  outline: none;
}

.border-input:focus {
  border-bottom-color: #667eea;
}

.border-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.border-input:focus ~ .border-line {
  width: 100%;
}

/* ホバー効果 */
.border-input:hover {
  border-bottom-color: #b0b0b0;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const borderInputs = document.querySelectorAll('.border-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });
  });
});

⑤ カスタマイズ例

/* ボーダー変化の速度調整 */
.border-line {
  transition: width 0.5s ease;
}

/* ボーダー色の変更 */
.border-line {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
}

/* ボーダーの太さ調整 */
.border-line {
  height: 3px;
}

背景変化効果

入力フィールドの背景色が動的に変化するアニメーションです。

① デモ

See the Pen 入力フィールド背景変化効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この背景変化効果の特徴

視覚的な状態表示
直感的なフィードバック
カラフルな表現

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="background-input" class="background-input" placeholder="お名前を入力">
  </div>

  <div class="input-group">
    <input type="email" id="background-email" class="background-input" placeholder="メールアドレスを入力">
  </div>

  <div class="input-group">
    <input type="password" id="background-password" class="background-input" placeholder="パスワードを入力">
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.background-input {
  width: 100%;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: #f8f9fa;
  transition: all 0.3s ease;
  outline: none;
}

.background-input:focus {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.background-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const backgroundInputs = document.querySelectorAll('.background-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });
  });
});

⑤ カスタマイズ例

/* 背景変化の速度調整 */
.background-input {
  transition: all 0.5s ease;
}

/* 背景色の変更 */
.background-input:focus {
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
}

/* 背景変化の強度調整 */
.background-input:focus {
  background: #667eea;
}

シャドウ効果

入力フィールドに影の変化を加えるアニメーションです。

① デモ

See the Pen 入力フィールドシャドウ効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このシャドウ効果の特徴

立体的な表現
視覚的インパクト
モダンなデザイン

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="shadow-input" class="shadow-input" placeholder="お名前を入力">
  </div>

  <div class="input-group">
    <input type="email" id="shadow-email" class="shadow-input" placeholder="メールアドレスを入力">
  </div>

  <div class="input-group">
    <input type="password" id="shadow-password" class="shadow-input" placeholder="パスワードを入力">
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.shadow-input {
  width: 100%;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  outline: none;
}

.shadow-input:focus {
  border-color: #667eea;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const shadowInputs = document.querySelectorAll('.shadow-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });
  });
});

⑤ カスタマイズ例

/* シャドウ変化の速度調整 */
.shadow-input {
  transition: all 0.5s ease;
}

/* シャドウ色の変更 */
.shadow-input:focus {
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

/* シャドウ強度の調整 */
.shadow-input:focus {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

スケール効果

入力フィールドが微細に拡大/縮小するアニメーションです。

① デモ

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

このスケール効果の特徴

微細な動き
視覚的フィードバック
洗練された表現

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="scale-input" class="scale-input" placeholder="お名前を入力">
  </div>

  <div class="input-group">
    <input type="email" id="scale-email" class="scale-input" placeholder="メールアドレスを入力">
  </div>

  <div class="input-group">
    <input type="password" id="scale-password" class="scale-input" placeholder="パスワードを入力">
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.scale-input {
  width: 100%;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  transition: all 0.3s ease;
  outline: none;
  transform: scale(1);
}

.scale-input:focus {
  border-color: #667eea;
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const scaleInputs = document.querySelectorAll('.scale-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });
  });
});

⑤ カスタマイズ例

/* スケール変化の速度調整 */
.scale-input {
  transition: all 0.5s ease;
}

/* スケール強度の調整 */
.scale-input:focus {
  transform: scale(1.05);
}

/* スケール時の影効果 */
.scale-input:focus {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

カラー効果

入力フィールドの文字色や枠線色が変化するアニメーションです。

① デモ

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

このカラー効果の特徴

カラフルな表現
視覚的フィードバック
感情的な反応

② HTML

<div class="form-container">
  <div class="input-group">
    <input type="text" id="color-input" class="color-input" placeholder="お名前を入力">
  </div>

  <div class="input-group">
    <input type="email" id="color-email" class="color-input" placeholder="メールアドレスを入力">
  </div>

  <div class="input-group">
    <input type="password" id="color-password" class="color-input" placeholder="パスワードを入力">
  </div>
</div>

③ CSS

/* フォームコンテナ */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.color-input {
  width: 100%;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  color: #333;
  transition: all 0.3s ease;
  outline: none;
}

.color-input:focus {
  border-color: #667eea;
  color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.color-input:focus::placeholder {
  color: rgba(102, 126, 234, 0.6);
}

/* 入力値がある場合の色 */
.color-input.has-value {
  border-color: #28a745;
  color: #28a745;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const colorInputs = document.querySelectorAll('.color-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });
  });
});

⑤ カスタマイズ例

/* カラー変化の速度調整 */
.color-input {
  transition: all 0.5s ease;
}

/* カラー効果の変更 */
.color-input:focus {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* カラー効果の強度調整 */
.color-input:focus {
  background: rgba(102, 126, 234, 0.05);
}

フォーカス効果

① デモ

See the Pen フォーカス効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフォーカス効果の特徴

フォーカス時の視覚的強調
多様なエフェクト
ユーザビリティ向上
アクセシビリティ配慮

② HTML

<div class="form-group">
  <input type="text" id="focus-input" class="focus-input" placeholder="お名前">
</div>

<div class="form-group">
  <input type="email" id="focus-email" class="focus-input" placeholder="メールアドレス">
</div>

<div class="form-group">
  <textarea id="focus-textarea" class="focus-input" placeholder="メッセージ" rows="3"></textarea>
</div>

③ CSS

.form-group {
  margin-bottom: 20px;
}

.focus-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  transition: all 0.3s ease;
  outline: none;
  position: relative;
}

.focus-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

/* プレースホルダーのアニメーション */
.focus-input::placeholder {
  color: #999;
  transition: all 0.3s ease;
}

.focus-input:focus::placeholder {
  color: #667eea;
  transform: translateX(10px);
}

/* 入力値がある時のスタイル */
.focus-input:not(:placeholder-shown) {
  border-color: #4caf50;
  background: #f8fff8;
}

/* エラー状態 */
.focus-input.error {
  border-color: #f44336;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const inputs = document.querySelectorAll('.focus-input');

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

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

    // 入力値の検証
    input.addEventListener('input', function() {
      if (this.value) {
        this.classList.add('has-value');
      } else {
        this.classList.remove('has-value');
      }
    });

    // エラー状態のシミュレーション
    input.addEventListener('blur', function() {
      if (this.type === 'email' && this.value && !isValidEmail(this.value)) {
        this.classList.add('error');
      } else {
        this.classList.remove('error');
      }
    });
  });

  // メールアドレスの簡易検証
  function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.focus-input:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}

.focus-input:focus::placeholder {
  color: #ff6b6b;
}

/* スケール効果 */
.focus-input:focus {
  transform: scale(1.02);
}

/* 回転効果 */
.focus-input:focus {
  transform: rotate(1deg);
}

/* パルス効果 */
.focus-input:focus {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); }
  50% { box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.2); }
  100% { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); }
}