Roll In

The element spins in around a corner or its center while fading in.

Add a "Rotate In" entrance animation (also called rotate in down left) to [where].
The element should swing into place around its bottom-left corner from a tilted angle while fading in: smooth and unhurried, easing out as it settles.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element glides in from off its container edge to its resting position without fading.

Add a "Slide In" entrance animation (also called slide in left, slide in right, slide in up or slide in down) to [where].
The element should glide in from beyond its container edge to its resting place, fully opaque the whole time: quick, decelerating smoothly with no bounce.
Clip it at the container edge so it doesn't overlap neighbours or cause scrollbars while it is outside, and show it in place 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).

The element spins and scales up from a point while fading in.

Add a "Swirl In" entrance animation (also called swirl in forward) to [where].
The element should spin well past a full turn while growing from a single point to full size and fading in: fast at first, slowing as it settles.
Play it once on a single element rather than a whole group, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element spins around a pivot while fading away.

Add a "Rotate Out" exit animation to [where].
The element should spin around its center, a little over half a turn, while fading away: smooth, speeding up as it goes.
Remove it only after the spin ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).