Shake
No library Intermediate
On invalid submission the input rattles horizontally to signal an error — a rapidly damping shake with a red border. Pure CSS keyframes, no dependencies.
On invalid submission the input rattles horizontally to signal an error — a rapidly damping shake with a red border. Pure CSS keyframes, no dependencies.
Goal: Create a "Shake" input error animation.
Visual behavior: A text input paired with a submit button. When the user submits with an empty field: the input rapidly shakes horizontally — moving left, right, left, right in diminishing steps — taking ~450ms total. The border simultaneously turns red and an error message appears below. On the next keystroke the error clears.
Technique:
- @keyframes input-shake: translateX oscillates 0 → -6px → 6px → -4px → 4px → -2px → 2px → 0 over 7 keyframe stops
- Trigger by re-mounting the animated wrapper (React key change on each failed submit), so the animation always restarts from zero
- Border-color transitions to red on error; transitions back on value change
- Error message is a sibling element below the input
Accessibility: Error text is always visible as text, not just conveyed through animation. Animation disabled under prefers-reduced-motion — the border-color and error text still convey the error state.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.