Attention seeker (pulse, shake, jiggle)
A quick pulse, shake, or jiggle that pulls the eye toward an error, update, or action that needs attention.
See it
What it is
An attention seeker is a short pulse, shake, bounce, or jiggle whose job is to redirect the eye. A pulse suggests something new or available; a horizontal shake rejects an action, the way the macOS login field shakes its head at a wrong password; a small jiggle can remind someone about an unfinished step. Animate.css uses 'Attention seekers' as the name for this family of effects.
Reach for one after a meaningful event, such as invalid form submission, a newly available action, or an unread update. Keep it brief and let it settle back to the exact starting pose. One clear run usually works better than an element that keeps asking to be noticed.
Gotcha: motion cannot be the only error or status signal. Pair the effect with text, color, and the correct ARIA state, and move focus when the interaction requires it. Repeating pulses become visual noise, while a large shake can feel like the interface is scolding the user.
Ask AI for it
Add a one-shot CSS @keyframes attention animation to this invalid field. Move it on the x axis through 0, -6px, 5px, -3px, 2px, and 0 over 320ms with an ease-out timing function, using transform only. Restart the animation on each failed submit with the Web Animations API rather than forcing layout. Also set 'aria-invalid=true', render a specific inline error message linked with 'aria-describedby', focus the first invalid field, and replace the shake with an instant state change under 'prefers-reduced-motion: reduce'.