Flip Out

The element rotates in 3D around its horizontal or vertical axis from edge-on to facing the viewer.

Add a "Flip In" entrance animation (also called flip in X or flip in Y) to [where].
The element should start edge-on and rotate around its horizontal axis to face the viewer, swinging slightly past and back before it settles: quick, with a small wobble.
Give it perspective so the rotation reads as depth, and show it facing forward without motion 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).

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).

The element swings on a top-left hinge, dangles, and then drops off the screen.

Add a "Hinge" exit animation to [where].
The element should swing down from its top-left corner as if a screw came loose, dangle back and forth, then drop off the screen while fading: slow, comic and deliberate.
Let it fall over other content without pushing the layout or adding scrollbars, remove it once it has dropped, and hide it instantly 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 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).