Swirl 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 pops up from a small rotated state, overshoots, and settles like a jack-in-the-box toy.

Add a "Jack In The Box" entrance animation to [where].
The element should pop up from a tiny, tilted state anchored at its bottom edge, rock from side to side past upright, and settle: springy and playful.
Play it once only, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element grows from a small, transparent state to full size while fading in.

Add a "Zoom In" entrance animation (also called scale in) to [where].
The element should grow from small and transparent to full size while fading in: quick and smooth, with no overshoot.
Scale it from its center without affecting the surrounding layout, and show it in place without motion 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).

Letters start widely spaced and faded, then tighten into normal spacing while appearing.

Add a "Tracking In" text animation (also called text tracking in or letter-spacing in) to [where].
The letters should start widely spaced and faint, then draw together to normal spacing while becoming fully visible: smooth, slowing down at the end.
Keep the text centered and on one line while the spacing changes so the surrounding layout doesn't shift, and show it at normal spacing when the user prefers reduced motion (prefers-reduced-motion).

The element shrinks and fades until it vanishes.

Add a "Zoom Out" exit animation (also called scale out) to [where].
The element should shrink toward its center while fading until it vanishes: quick, speeding up as it goes.
Remove it from the layout and from keyboard focus only after it has vanished, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).