エラー時のシェイクアニメ
フォームの入力欄を 横に細かく震わせて 、入力ミスや送信失敗を直感的に伝えるエラー演出です。 @keyframes shake で translateX を左右に振り、進行とともに振り幅を 2px から 8px へ強めてから収束させることで、人が頭を横に振るような「ダメ」のニュアンスを出しています。
解説
フォームの入力欄を横に細かく震わせて、入力ミスや送信失敗を直感的に伝えるエラー演出です。@keyframes shake で translateX を左右に振り、進行とともに振り幅を 2px から 8px へ強めてから収束させることで、人が頭を横に振るような「ダメ」のニュアンスを出しています。.is-shake クラスを付けた瞬間に再生され、JS 側で setTimeout を使い 0.5 秒後にクラスを外して元へ戻します。同時に枠線が赤 #dc5050 に変わります。
使う場面
- パスワードやメールアドレスの形式エラー
- 必須項目の未入力チェック
- ログイン失敗時のフィードバック
振り幅は translateX の値で、テンポは .4s で調整できます。実装ではバリデーション失敗時にクラスを付け、一定時間後に必ず外す点が肝心で、外し忘れると次回が再生されません。色覚に配慮し、震えと赤色だけに頼らずエラーメッセージのテキストも併記しましょう。動きを抑える設定の利用者には prefers-reduced-motion で揺れを止めると親切です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
震えを繰り返すにはどうしますか
クラス .is-shake を一度外してから付け直す必要があります。アニメーションは同名クラスが付いた瞬間に再生されるため、JavaScript で setTimeout により外し、次のエラー時に再度付与する流れにします。
震える速さや幅を変えられますか
変えられます。テンポは animation の .4s を、振り幅は @keyframes 内の translateX の数値（2px〜8px）を調整してください。幅を大きくすると激しく、小さくすると控えめなフィードバックになります。