ATTENTION EFFECT

Glow.

A soft halo briefly emphasizes an active surface.

See the movement

One intentional trigger

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

What it does

A shadow or halo grows and fades around an element without changing its size. The effect is useful for a short highlight, but it should not replace a clear selected or focused state.

Timing curveease-in-out
Default duration1100ms
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