Fade In / Out
You might say
When the content changes, fade the old content out and the new content in.
Reveal or hide an element by changing its opacityA fade is a simple transition between transparent and visible states. It works for overlays, messages, and content replacement, but opacity alone does not explain where an element came from. Combine it with small spatial motion only when that adds useful context.
Know first
You can say this to an AI Agent
Give the toast a brief opacity fade and remove it from hit testing and focus order after exit, so it cannot block the page. Support reduced motion and test entering, visible, exiting, and removed states.
When to use it
- Show or hide an overlay
- Replace a small piece of contentSlow entranceQuick exit
- Introduce a toast or status messageThe old fades out; the new fades in.
- Soften a non-spatial state changeopacitytransform
When NOT to use it
- Fade critical content so slowly that work is delayedAll statesAll statesIn progressThe menu only fades in place, with no origin or directional cue.
- Use opacity to hide an element that remains unexpectedly interactivefadeDuration too longA fade-in that is too slow delays the sense that content is ready.
- Combine large movement with every fadeAt opacity: 0 it still takes up space and blocks clicks underneath.
- Use repeated fades around text people are readingDialog fadeScale fadeSlide fadeUsing only fades for every change weakens hierarchy and directional cues.
Anatomy
transform: translateY(8px)animation-duration: .2s
Opacity changes from 0 to 1, taking the element from transparent to visible
A small translate offset gives the entering element a more natural motion
There is no universal duration; choose one based on travel distance, task urgency, and reduced-motion preferences.
Variants
Pure Fade
For overlay or placeholder content that should appear without drawing attention
Fade In Up
For a card or modal entering the page
Cross Fade
For switching carousel or tab content
Typical use cases
Overlay
The mask fades in synchronously with the pop-up window, and uses slight displacement to express the entry direction
Toast
✓ Saved
Entry fade-in, the duration is adjusted according to the task
✓ Saved
Exit fade-out, you can use a faster pace
Image loading
Introduction
Comments 12
Related articles
New News: A new item has been added to the short entry animation prompt list
Old content (afterimage) fades out, new content fades in, and cross-fade does not interrupt the line of sight
Content swap
300ms
→
The first screen content fades in as a whole + moves up slightly, without flashing or jumping
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check