Light Speed In

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 shears sideways when hovered.

Add a "Skew" hover effect to [where].
The element should shear sideways into a slight slant while the pointer is over it, and straighten when it leaves: quick and smooth.
Keep the text readable while slanted and 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 skews and speeds off to the side while fading.

Add a "Light Speed Out" exit animation (also called lightspeed out) to [where].
The element should slant and speed off to the side while fading out: fast, accelerating as it leaves.
Keep it from causing a horizontal scrollbar as it passes the edge, 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).