入力フォーム &#8211; ケケンタの独学ITブログ

バリデーションアニメーションとは

バリデーションアニメーションは、ユーザーの入力が正しくない場合に表示される視覚的なフィードバックを提供するアニメーション効果です。エラーの内容を分かりやすく伝え、ユーザビリティを向上させる効果的な手法です。

効果的な使用場面

適している場面

フォーム入力フィールド
ログイン・サインアップ画面
パスワード入力
メールアドレス入力
必須項目の入力チェック

避けるべき場面

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

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
シェイク効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パルス効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
フェード効果	⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
カラー変化効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
アイコン表示効果	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

シェイク効果

入力エラー時に要素が揺れるアニメーションです。

① デモ

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

このシェイク効果の特徴

視覚的インパクトが高い
エラーを明確に示す
注目を集める効果

② HTML


  
    
    お名前を入力してください
  

  
    
    正しいメールアドレスを入力してください
  

  
    
    パスワードは8文字以上で入力してください

③ CSS

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

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

.shake-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;
}

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

.shake-input.error {
  border-color: #ff6b6b;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const shakeInputs = document.querySelectorAll('.shake-input');
  const submitBtn = document.getElementById('shake-submit');

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement);
        return false;
      }
    }

    hideError(input, errorElement);
    return true;
  }

  // エラー表示
  function showError(input, errorElement) {
    input.classList.add('error');
    errorElement.classList.add('show');
  }

  // エラー非表示
  function hideError(input, errorElement) {
    input.classList.remove('error');
    errorElement.classList.remove('show');
  }

  // 入力時の検証
  shakeInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    shakeInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

/* シェイク速度の調整 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* シェイク強度の調整 */
.shake-input.error {
  animation: shake 0.8s ease-in-out;
}

/* エラー色の変更 */
.shake-input.error {
  border-color: #ff4757;
}

パルス効果

入力エラー時に脈動するアニメーションです。

① デモ

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

このパルス効果の特徴

動的な表現
視覚的インパクト
注目を集める効果

② HTML


  
    
    お名前を入力してください
  

  
    
    正しいメールアドレスを入力してください
  

  
    
    パスワードは8文字以上で入力してください

③ CSS

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

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

.pulse-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;
}

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

.pulse-input.error {
  border-color: #ff6b6b;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const pulseInputs = document.querySelectorAll('.pulse-input');
  const submitBtn = document.getElementById('pulse-submit');

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement);
        return false;
      }
    }

    hideError(input, errorElement);
    return true;
  }

  // エラー表示
  function showError(input, errorElement) {
    input.classList.add('error');
    errorElement.classList.add('show');
  }

  // エラー非表示
  function hideError(input, errorElement) {
    input.classList.remove('error');
    errorElement.classList.remove('show');
  }

  // 入力時の検証
  pulseInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    pulseInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

/* パルス速度の調整 */
.pulse-input.error {
  animation: pulse 1s ease-in-out infinite;
}

/* パルス色の変更 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}

/* パルス強度の調整 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 107, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}

スライド効果

エラーメッセージがスライドインするアニメーションです。

① デモ

See the Pen バリデーションスライド効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

スムーズな表示
視覚的フィードバック
洗練された表現

② HTML


  
    
    お名前を入力してください
  

  
    
    正しいメールアドレスを入力してください
  

  
    
    パスワードは8文字以上で入力してください

③ CSS

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

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

.slide-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;
}

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

.slide-input.error {
  border-color: #ff6b6b;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s ease;
  overflow: hidden;
  max-height: 0;
}

.error-message.show {
  opacity: 1;
  transform: translateX(0);
  max-height: 50px;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const slideInputs = document.querySelectorAll('.slide-input');
  const submitBtn = document.getElementById('slide-submit');

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement);
        return false;
      }
    }

    hideError(input, errorElement);
    return true;
  }

  // エラー表示
  function showError(input, errorElement) {
    input.classList.add('error');
    errorElement.classList.add('show');
  }

  // エラー非表示
  function hideError(input, errorElement) {
    input.classList.remove('error');
    errorElement.classList.remove('show');
  }

  // 入力時の検証
  slideInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    slideInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

/* スライド速度の調整 */
.error-message {
  transition: all 0.6s ease;
}

/* スライド方向の変更 */
.error-message {
  transform: translateY(-20px);
}

.error-message.show {
  transform: translateY(0);
}

/* スライド強度の調整 */
.error-message {
  transform: translateX(-30px);
}

.error-message.show {
  transform: translateX(0);
}

フェード効果

エラーメッセージがフェードインするアニメーションです。

① デモ

See the Pen バリデーションフェード効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

シンプルで分かりやすい
アクセシビリティが高い
モダンな印象

② HTML


  
    
    お名前を入力してください
  

  
    
    正しいメールアドレスを入力してください
  

  
    
    パスワードは8文字以上で入力してください

③ CSS

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

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

.fade-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;
}

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

.fade-input.error {
  border-color: #ff6b6b;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  visibility: visible;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const fadeInputs = document.querySelectorAll('.fade-input');
  const submitBtn = document.getElementById('fade-submit');

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement);
        return false;
      }
    }

    hideError(input, errorElement);
    return true;
  }

  // エラー表示
  function showError(input, errorElement) {
    input.classList.add('error');
    errorElement.classList.add('show');
  }

  // エラー非表示
  function hideError(input, errorElement) {
    input.classList.remove('error');
    errorElement.classList.remove('show');
  }

  // 入力時の検証
  fadeInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    fadeInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

/* フェード速度の調整 */
.error-message {
  transition: all 0.5s ease;
}

/* フェード強度の調整 */
.error-message {
  opacity: 0;
  transform: scale(0.9);
}

.error-message.show {
  opacity: 1;
  transform: scale(1);
}

/* フェード方向の変更 */
.error-message {
  opacity: 0;
  transform: translateY(10px);
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

カラー変化効果

エラー時に色が変化するアニメーションです。

① デモ

See the Pen バリデーションカラー変化効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカラー変化効果の特徴

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

② HTML


  
    
    お名前を入力してください
  

  
    
    正しいメールアドレスを入力してください
  

  
    
    パスワードは8文字以上で入力してください

③ 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;
  transition: all 0.3s ease;
  outline: none;
}

.color-input:focus {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.color-input.error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.05);
  color: #ff6b6b;
}

.color-input.success {
  border-color: #51cf66;
  background: rgba(81, 207, 102, 0.05);
  color: #51cf66;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

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

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement);
        return false;
      }
    }

    showSuccess(input, errorElement);
    return true;
  }

  // エラー表示
  function showError(input, errorElement) {
    input.classList.remove('success');
    input.classList.add('error');
    errorElement.classList.add('show');
  }

  // 成功表示
  function showSuccess(input, errorElement) {
    input.classList.remove('error');
    input.classList.add('success');
    errorElement.classList.remove('show');
  }

  // 入力時の検証
  colorInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error') || this.classList.contains('success')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    colorInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

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

/* エラー色の変更 */
.color-input.error {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.05);
  color: #ff4757;
}

/* 成功色の変更 */
.color-input.success {
  border-color: #2ed573;
  background: rgba(46, 213, 115, 0.05);
  color: #2ed573;
}

アイコン表示効果

エラー時にアイコンが表示されるアニメーションです。

① デモ

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

このアイコン表示効果の特徴

右端配置で直感的な位置
円形の囲みでモダンな見た目
テキストアイコンで軽量で分かりやすい
背景色とシャドウの動的変化

② HTML


  
    
    
      ✕
      ✓
    
    お名前を入力してください
  

  
    
    
      ✕
      ✓
    
    正しいメールアドレスを入力してください
  

  
    
    
      ✕
      ✓
    
    パスワードは8文字以上で入力してください

③ CSS

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

.input-group {
  position: relative;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.icon-wrapper {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

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

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

.icon-input.error {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.icon-input.success {
  border-color: #51cf66;
  box-shadow: 0 0 0 3px rgba(81, 207, 102, 0.1);
}

.error-icon,
.success-icon {
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.1) rotate(-180deg);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.error-icon.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0deg);
  color: white;
}

.icon-wrapper.error {
  background: #ff6b6b;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.success-icon.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0deg);
  color: white;
}

.icon-wrapper.success {
  background: #51cf66;
  box-shadow: 0 2px 8px rgba(81, 207, 102, 0.3);
}

.error-message {
  position: absolute;
  left: 0;
  top: 100%;
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #5a6fd8;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const iconInputs = document.querySelectorAll('.icon-input');
  const submitBtn = document.getElementById('icon-submit');

  // バリデーション関数
  function validateInput(input) {
    const value = input.value.trim();
    const errorElement = input.parentElement.querySelector('.error-message');
    const errorIcon = input.parentElement.querySelector('.error-icon');
    const successIcon = input.parentElement.querySelector('.success-icon');

    // 入力値の検証
    if (!value) {
      showError(input, errorElement, errorIcon, successIcon);
      return false;
    }

    // メールアドレスの検証
    if (input.type === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        showError(input, errorElement, errorIcon, successIcon);
        return false;
      }
    }

    // パスワードの検証
    if (input.type === 'password') {
      if (value.length < 8) {
        showError(input, errorElement, errorIcon, successIcon);
        return false;
      }
    }

    showSuccess(input, errorElement, errorIcon, successIcon);
    return true;
  }

  // エラー表示
  function showError(input, errorElement, errorIcon, successIcon) {
    const iconWrapper = input.parentElement.querySelector('.icon-wrapper');
    input.classList.remove('success');
    input.classList.add('error');
    iconWrapper.classList.remove('success');
    iconWrapper.classList.add('error');
    errorElement.classList.add('show');
    errorIcon.classList.add('show');
    successIcon.classList.remove('show');
  }

  // 成功表示
  function showSuccess(input, errorElement, errorIcon, successIcon) {
    const iconWrapper = input.parentElement.querySelector('.icon-wrapper');
    input.classList.remove('error');
    input.classList.add('success');
    iconWrapper.classList.remove('error');
    iconWrapper.classList.add('success');
    errorElement.classList.remove('show');
    errorIcon.classList.remove('show');
    successIcon.classList.add('show');
  }

  // 入力時の検証
  iconInputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateInput(this);
    });

    input.addEventListener('input', function() {
      if (this.classList.contains('error') || this.classList.contains('success')) {
        validateInput(this);
      }
    });
  });

  // 送信ボタンクリック時の検証
  submitBtn.addEventListener('click', function() {
    let isValid = true;

    iconInputs.forEach(input => {
      if (!validateInput(input)) {
        isValid = false;
      }
    });

    if (isValid) {
      alert('送信しました！');
    }
  });
});

⑤ カスタマイズ例

/* アイコン表示速度の調整 */
.error-icon,
.success-icon {
  transition: all 0.5s ease;
}

/* アイコンサイズの調整 */
.error-icon,
.success-icon {
  font-size: 20px;
}

/* アイコン表示強度の調整 */
.error-icon.show,
.success-icon.show {
  transform: scale(1.1) rotate(0deg);
}

/* アイコンの初期表示サイズ調整 */
.error-icon,
.success-icon {
  transform: scale(0.1) rotate(-180deg);
}

まとめ

今回ご紹介した6種類のバリデーションアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

フォーム入力: シェイク効果・パルス効果
ログイン画面: カラー変化効果・アイコン表示効果
重要度の高いエラー: シェイク効果・パルス効果
軽微なエラー: フェード効果・スライド効果

実装のポイント

アクセシビリティを重視: エラー状態を明確に表示
パフォーマンスを考慮: 軽量なアニメーション
ブラウザ対応: 幅広いブラウザで動作するように
ユーザビリティ: 直感的な操作を可能に

ケケンタ

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

あわせて読みたい

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

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

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

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

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

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

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

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では業界最安値でWeb制作を...

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

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

スライダー

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

特殊効果

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

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

ケケンタ — Thu, 07 Aug 2025 04:36:55 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

特にフォームや検索ボックスには、入力フィールドアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

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

あわせて読みたい

入力フォームアニメーションとは

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

フローティングラベル

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

① デモ

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

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

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

② HTML


  
    
    お名前
  

  
    
    メールアドレス
  

  
    
    メッセージ

③ 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

③ 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

③ 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

③ 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

③ 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

③ 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

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

まとめ

今回ご紹介した7種類の入力フォームアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

ログインフォーム: ラベル浮上効果・ボーダー変化効果
検索ボックス: シャドウ効果・スケール効果
お問い合わせフォーム: 背景変化効果・カラー効果・フォーカス効果

実装のポイント

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

ケケンタ

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

あわせて読みたい