Fade Out Directional

The element glides out past a container edge and disappears.

Add a "Slide Out" exit animation (also called slide out up or slide out down) to [where].
The element should glide out past its container edge and disappear, staying fully opaque: quick, accelerating as it leaves.
Clip it at the container edge, hide it from keyboard and screen readers once it is out of view, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element fades in while drifting a short distance from one side into its final position.

Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element in place without motion 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 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 rises a short distance while fading in, as if settling into place.

Add a "Fade Up" entrance animation (also called fade-in-up or reveal on scroll) to [where].
Elements should rise slightly while fading in the first time they scroll into view: subtle and quick, not bouncy.
Animate once, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

The element blinks on with rapid opacity flashes like a faulty neon sign before staying visible.

Add a "Flicker In" entrance animation to [where].
The element should blink on and off a few times at irregular intervals, like a faulty neon sign, before staying lit: sharp flashes with no movement.
Play it once, keep the flashes few and slow enough to be safe for people sensitive to flashing light, and show it steadily lit when the user prefers reduced motion (prefers-reduced-motion).

The element makes a full turn around the Y axis while moving slightly toward the viewer and back.

Add a "Flip" animation to [where].
The element should make one full turn around its vertical axis while coming slightly toward the viewer, then settle back with a tiny dip in size: lively but brief.
Give it perspective so the turn reads as depth, play it once rather than looping, and skip the turn when the user prefers reduced motion (prefers-reduced-motion).