Bounce Scale

The element quickly scales up and settles back with a springy pop.

Add a "Pop" hover effect to [where].
Each time the pointer enters, the element should swell up once quickly and settle back to its normal size, like a small springy pop.
Play it once per hover rather than holding the larger size or looping, and keep the surrounding layout from shifting.

The element smoothly scales up slightly when the pointer is over it.

Add a "Grow" hover effect (also called scale up) to [where].
The element should scale up slightly and smoothly while the pointer is over it, and shrink back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.

Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element shrinks slightly while pressed and springs back on release.

Add a "Press (Button Tap Scale)" effect (also called tap feedback or press state) to [where].
While it is pressed the element should shrink slightly and darken a touch, then spring back to full size with a small bounce on release: quick and subtle.
Show the same feedback for keyboard presses and touch, and keep the surrounding layout from shifting.

A highlight background slides between cards in a grid to follow whichever card is hovered.

Add a "Card Hover Effect" (also called sliding highlight card grid) to [where].
A soft highlight background should appear behind the hovered card and glide smoothly to whichever card the pointer moves to next, fading out when the pointer leaves the grid.
Make keyboard focus move the highlight the same way, and keep the cards themselves from shifting.

A soft radial light follows the pointer across the card surface and reveals the background beneath.

Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.

A corner of the element folds up like a turning page on hover.

Add a "Curl" hover effect (also called page curl) to [where].
One corner of the element should fold up smoothly like a page being turned, showing the back of the fold, and flatten again when the pointer leaves.
Keep the fold small so it doesn't cover important content, and show the same effect on keyboard focus.