Ping

Concentric circles expand outward from a center point and fade.

Add a "Ripple Rings" effect (also called a background ripple or concentric ripples) to [where].
Rings should keep expanding outward from a center point and fade as they grow, evenly spaced one after another: slow and steady.
Keep the center element still and in place, and stop the ripples for users who prefer reduced motion.

The element gently scales or fades in and out repeatedly.

Add a "Pulse" effect (also called pulsing) to [where].
The element should gently swell and ease back in a slow, steady rhythm: subtle, with no bounce.
Loop it seamlessly without shifting the surrounding layout, and stop it for users who prefer reduced motion.

A count badge pops, bounces, or pulses when a new notification arrives.

Add a "Notification Badge Bounce" animation (also called a badge pop or ping) to [where].
When a new notification arrives, the count badge should pop in from nothing and settle with a couple of quick, springy bounces while a soft ring pulses out from it once.
Play it once per new notification rather than looping, and announce the new count to screen readers.

Concentric border rings expand outward or contract inward from the element on hover.

Add a "Border Ripple" hover effect to [where].
When the pointer enters, a couple of border rings should spread outward from the element one after another and fade away: quick and light, like a ripple.
Play it once per hover rather than looping, and don't let the rings shift the surrounding layout.

The element stretches horizontally and squashes vertically in elastic steps before returning to normal.

Add a "Rubber Band" attention effect (also called rubberband) to [where].
The element should stretch wide and squash short, then spring back through a few smaller elastic steps before settling at its normal size.
Play it once when triggered, and keep the surrounding layout from shifting while it stretches.

The element jitters quickly back and forth along one axis.

Add a "Shake" effect (also called an error shake or invalid input shake) to [where].
The element should jitter quickly left and right a few times and stop exactly where it started: fast and firm.
Play it once each time the error happens rather than looping, and pair it with a visible error message so the meaning does not rely on motion alone.