Tab Indicator Slide

An element appears to move and resize into a matching element in a new spot, sharing one identity.

Add a "Shared Layout Animation" (also called an in-page shared element) to [where].
When the selection changes, the element should appear to move and resize smoothly from its old spot into its new one, easing gently into place, so it reads as one object rather than two.
Show only one copy at any moment, and keep the surrounding layout from jumping while it moves.

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 round knob slides along a track and the track color changes between off and on.

Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.

A line slides in from the bottom or top edge into place to underline or overline the element.

Add an "Underline Reveal" hover effect (also called overline reveal or reveal) to [where].
A full-width line should slide up into place from just below the bottom edge while the pointer is over the element, and slide back down out of view when it leaves: quick and smooth.
Clip the line at the edge so it appears by sliding rather than fading or growing, and show the same effect on keyboard focus.

A brief message slides or fades in at a screen edge, waits, then leaves; stacked toasts shift to make room.

Add a "Toast Slide-In" (also called a snackbar or toast notification) to [where].
Each message should slide up from the screen edge and fade in, decelerating smoothly; when a new toast arrives, the ones already shown should shift over smoothly to make room.
Announce the message to screen readers without stealing focus, keep it up long enough to read, and pause the auto-dismiss on hover or focus.

A small label fades and nudges into place next to an element after a short hover delay.

Add a "Tooltip Fade" (also called a tooltip reveal) to [where].
After a short hover delay, the label should fade in while nudging slightly into place next to the element, then disappear quickly with no delay when the pointer leaves.
Show it on keyboard focus too, let Escape dismiss it, and connect it to the element so screen readers read it.

A content panel smoothly grows to its full height or shrinks to zero when its header is toggled.

Add an "Accordion Expand-Collapse" effect (also called a collapse or disclosure) to [where].
When a header is pressed, its panel should smoothly grow to the full height of its content and shrink back to nothing on the next press, with the header's arrow turning to match: quick and smooth, no bounce.
Animate to the content's real height rather than a fixed guess, keep the header a real button that exposes its expanded state, and make it work from the keyboard.