Blur Out
Also called Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
The element blurs progressively while fading or sliding away.
Use for
Soft transitions and text exits
Variants
- fade only
- slide out
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
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).Similar motions
A
Puff In / Puff Out
Also called Puff
The element scales from a large, blurred, transparent state down into focus, like a puff of smoke, or the reverse when leaving.
Use for
Soft object appearance
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).A
Fade Out Directional
Also called Fade Out Up, Fade Out Down
The element fades away while drifting off in one direction.
Use for
Dismissing notifications and cards
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).A
Fade In / Fade Out
Also called Fade
The element goes from fully transparent to fully opaque in place, or the reverse when leaving.
Use for
Modals, toasts, page content appearing
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).ABCD
Blur In
Also called Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
The element starts heavily blurred and sharpens into focus, often while sliding or fading in.
Use for
Headlines and hero text reveals
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).More in Entrance & Exit
A
Bounce In
Also called Bounce In Down, Bounce In Up
The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.
Use for
Notification badges, playful modals
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).A
The element bounces slightly and then shrinks or flies off an edge.
Use for
Playful dismissals
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 Reveal
Also called Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.
Use for
Image and headline reveals
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).