ATTENTION EFFECT

Shake.

A short sideways nudge signals a rejected action.

See the movement

One intentional trigger

Playback starts only when you request it. Stop returns to the still illustration.

What it does

A restrained horizontal shake can reinforce a validation failure. It must accompany a readable explanation, since motion alone cannot communicate what went wrong or how to fix it.

Timing curveease-in-out
Default duration450ms
RepetitionOnce per trigger

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference