入力エラーをプルプルと震えて知らせるフィードバック。:user-invalidと組み合わせるとJavaScriptなしで動きます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
左右に振れ幅を減らしながら揺れる(-6→6→-4→4px)ことで、機械的な往復ではなく減衰する自然な振動になります。トリガーには:user-invalid(ユーザーが操作した後にだけ発火する検証擬似クラス)を使っているため、ページを開いた瞬間に震えることはありません。
揺れはエラーの「通知」であって「説明」ではありません。何が悪いかのテキストメッセージは必ず併用してください。