Light Speed Out

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 shoots in from the side with a skew that straightens as it lands.

Add a "Light Speed In" entrance animation (also called lightspeed in) to [where].
The element should shoot in fast from the side, slanted as if moving at speed, then overcorrect the slant once and straighten as it lands: fast and dramatic, slowing at the end.
Keep it from causing a horizontal scrollbar while it is still off-screen, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element fades away while drifting off in one direction.

Add a "Fade Out Directional" exit animation (also called fade out up or fade out down) to [where].
The element should fade away while drifting a short distance in one direction: quick, speeding up as it leaves.
Remove it from the layout only after the fade ends so neighbouring content doesn't jump early, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

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 rolls in from the left like a wheel while fading in.

Add a "Roll In" entrance animation to [where].
The element should roll in from the left like a wheel, turning as it travels, while fading in: smooth, slowing down as it lands.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element rolls off to the right while fading out.

Add a "Roll Out" exit animation to [where].
The element should roll off to the right like a wheel, turning as it travels, while fading out: smooth, speeding up as it leaves.
Remove it from the layout only after it has rolled away, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).