# エラーシェイクのCSSアニメーション実装

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

- カテゴリ: マイクロインタラクション
- URL: https://www.css-dictionary.com/animations/shake-error/

## HTML

```html
<label>
  メールアドレス（必須）
  <input type="email" required placeholder="入力せずに外をクリック">
</label>
```

## CSS

```css
label {
  display: block;
  font-size: 13px;
  color: #5d5344;
  width: 240px;
}

input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1.5px solid #cec2a8;
  border-radius: 6px;
  background: #fff;
}

input:user-invalid {
  border-color: #bd3a2e;
  background: #fbecec;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  20% { translate: -6px 0; }
  40% { translate: 6px 0; }
  60% { translate: -4px 0; }
  80% { translate: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  input:user-invalid { animation: none; }
}
```

## 仕組みの解説

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

## 実装のポイント

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

## 使っているプロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [pseudo-user-valid](https://www.css-dictionary.com/property/pseudo-user-valid.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [border](https://www.css-dictionary.com/property/border.md)