Entrance & Exit

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 shrinks and slides off toward an edge while fading out.

Add a "Back Out" exit animation to [where].
The element should first shrink back slightly in place, then slide off toward an edge while fading out: a deliberate two-step exit, not a single quick fade.
Remove the element only after the animation ends so the layout doesn't jump mid-motion, and remove it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element starts heavily blurred and sharpens into focus, often while sliding or fading in.

Add a "Blur In" entrance animation (also called text focus in, focus in or blur text reveal) to [where].
The content should start heavily blurred and transparent, then sharpen into focus in place: soft and fairly slow, with no movement.
Play it once, and show the text sharp right away when the user prefers reduced motion (prefers-reduced-motion).

The element blurs progressively while fading or sliding away.

Add a "Blur Out" exit animation (also called text blur out or smoky text dissipate) to [where].
The content should grow more and more blurred while fading away in place: soft and fairly slow, as if it dissolves.
Hide or remove the element only after the blur finishes, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.

Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element bounces slightly and then shrinks or flies off an edge.

Add a "Bounce Out" exit animation to [where].
The element should dip slightly, swell a little past its size, then shrink away while fading out: short and springy.
Remove it from the layout only after the animation ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.

Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered when the user prefers reduced motion (prefers-reduced-motion).

The element goes from fully transparent to fully opaque in place, or the reverse when leaving.

Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

The element fades in while drifting a short distance from one side into its final position.

Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element 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 rises a short distance while fading in, as if settling into place.

Add a "Fade Up" entrance animation (also called fade-in-up or reveal on scroll) to [where].
Elements should rise slightly while fading in the first time they scroll into view: subtle and quick, not bouncy.
Animate once, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

The element blinks on with rapid opacity flashes like a faulty neon sign before staying visible.

Add a "Flicker In" entrance animation to [where].
The element should blink on and off a few times at irregular intervals, like a faulty neon sign, before staying lit: sharp flashes with no movement.
Play it once, keep the flashes few and slow enough to be safe for people sensitive to flashing light, and show it steadily lit 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 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 rotates in 3D until it is edge-on and invisible.

Add a "Flip Out" exit animation (also called flip out X or flip out Y) to [where].
The element should tilt back slightly, then rotate around its vertical axis until it is edge-on and gone: quick and crisp.
Give it perspective so the turn reads as depth, remove the element only after the turn finishes, 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).

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

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

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

Items in a group animate one after another with a small delay, forming a wave instead of appearing all at once.

Add a "Stagger" animation (also called staggered animation or cascade) to [where].
Items should fade up one after another with a short, even delay, so the group appears as a quick wave instead of all at once.
Keep the whole sequence brief even for long lists, animate once when it scrolls into view, and skip the motion 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).

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