← Back to gallery
CSS

Error Shake Feedback

One-shot transform shake paired with aria-live hints and a reduced-motion outline fallback, in subtle single-shake and assertive border-flash variants.

Duration
1s
Resolution
1440×900
Format
CSS
shakeerrorform-feedbackreduced-motionaccessibility

Feedback / validation / reduced-motion aware

Error shake feedback

Reimplements the form shake as a one-shot transform burst paired with an accessible hint and a static outline fallback for prefers-reduced-motion.

subtle single shake — ±6px · 320ms

 

One-shot low-amplitude · invalid on submit

Subtle single shake

A single short horizontal shake plays on submit or blur. Amplitude stays small so the motion reads as a correction nudge rather than a jolt.

  • one-shot
  • transform-only
  • invalid-state

 

Stronger amplitude · outline flashes red

Assertive shake + border flash

For repeat offences the amplitude widens and the outline flashes red for the duration of the shake. Screen readers get the outcome through aria-live text, not motion.

  • repeat-offence
  • border-flash
  • aria-live

Shake inspector

Subtle single shake

 

Amplitude
±6px
Duration
320ms

Play the shake exactly once per validation trigger. Never bind it to every keystroke — sustained shake reads as a visual stutter and hurts readability.

Live controls

css
.error-field[data-state='shaking'] {
  animation: errorShake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes errorShake {
  10%, 90% { transform: translateX(-1.8px); }
  20%, 80% { transform: translateX(3.6px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .error-field[data-state='shaking'] {
    animation: none;
    outline: 2px solid rgba(239, 68, 68, 0.95);
    outline-offset: 2px;
  }
}