Ripple

A colored circle grows from or shrinks toward the center to fill the element on hover.

Add a "Radial Fill" hover effect (also called circle expand) to [where].
A circle of the new color should grow smoothly from the center until it fills the element, and shrink back to the center when the pointer leaves, while the label color switches to stay readable.
Keep the circle clipped inside the element's shape and the label above it, and show the same effect on keyboard focus.

The new view is revealed inside a circle that expands from the click point.

Add a "Circular Reveal" transition (also called a clip-path circle expand or theme toggle reveal) to [where].
The new view should appear inside a circle that grows outward from the pressed control until it covers the whole area: smooth and steady, easing in and out.
Start the circle exactly where the control was pressed, and switch instantly without the circle for users who prefer reduced motion.

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.

A translucent overlay tints the element to show the pointer is over it.

Add a "Hover State Layer" (also called hover state, state layer or hover overlay) to [where].
A faint translucent overlay in the content color should fade in quickly over the element while the pointer is over it, and fade out when it leaves.
Keep it faint so contrast stays intact, and use the same layer approach for focus and pressed states.

A circle and tick draw themselves to confirm an action succeeded.

Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.

Swiping a list row sideways reveals action buttons such as delete or archive.

Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.

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.