CSS辞書
アニメーション実装集に戻る

エラーシェイク

マイクロインタラクション

入力エラーをプルプルと震えて知らせるフィードバック。:user-invalidと組み合わせるとJavaScriptなしで動きます。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

左右に振れ幅を減らしながら揺れる(-6→6→-4→4px)ことで、機械的な往復ではなく減衰する自然な振動になります。トリガーには:user-invalid(ユーザーが操作した後にだけ発火する検証擬似クラス)を使っているため、ページを開いた瞬間に震えることはありません。

実装のポイント

揺れはエラーの「通知」であって「説明」ではありません。何が悪いかのテキストメッセージは必ず併用してください。

使っているプロパティ