Zoom Out

The element scales from a large, blurred, transparent state down into focus, like a puff of smoke, or the reverse when leaving.

Add a "Puff In / Puff Out" animation (also called puff) to [where].
When it appears, the element should shrink from a large, blurred, transparent state into sharp focus like a settling puff of smoke; when it leaves, it should swell back into a blur and vanish: soft and fairly quick.
Keep the enlarged state from pushing the layout or causing scrollbars, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

The element shrinks and slides off toward an edge while fading out.

Add a "Back Out" exit animation to [where].
The element should first shrink back slightly in place, then slide off toward an edge while fading out: a deliberate two-step exit, not a single quick fade.
Remove the element only after the animation ends so the layout doesn't jump mid-motion, and remove it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element blurs progressively while fading or sliding away.

Add a "Blur Out" exit animation (also called text blur out or smoky text dissipate) to [where].
The content should grow more and more blurred while fading away in place: soft and fairly slow, as if it dissolves.
Hide or remove the element only after the blur finishes, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element smoothly scales down slightly when hovered.

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

The element starts scaled down and offset, then slides in and grows to full size.

Add a "Back In" entrance animation (also called back in up or back in down) to [where].
The element should arrive from beyond an edge while shrunk and slightly faded, then grow to full size once it reaches its place: a deliberate two-step move rather than a quick pop.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element starts heavily blurred and sharpens into focus, often while sliding or fading in.

Add a "Blur In" entrance animation (also called text focus in, focus in or blur text reveal) to [where].
The content should start heavily blurred and transparent, then sharpen into focus in place: soft and fairly slow, with no movement.
Play it once, and show the text sharp right away when the user prefers reduced motion (prefers-reduced-motion).