Back In
Also called Back In Up, Back In Down
The element starts scaled down and offset, then slides in and grows to full size.
Use for
Hero elements and cards
Variants
- up
- down
- left
- right
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 "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).Similar motions
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
Zoom In
Also called Scale In, Zoom In Up, Zoom In Down
The element grows from a small, transparent state to full size while fading in.
Use for
Modals, image lightboxes, popovers
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).A
The element pops up from a small rotated state, overshoots, and settles like a jack-in-the-box toy.
Use for
Surprise reveal
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).A
Light Speed In
Also called Lightspeed In
The element shoots in from the side with a skew that straightens as it lands.
Use for
Dramatic banner or headline entrance
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).More in Entrance & Exit
A
The element shrinks and slides off toward an edge while fading out.
Use for
Dismissing cards
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).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).ABCD
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
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).