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
When to use it
- Show or hide an overlay
- Replace a small piece of content
- Introduce a toast or status message
- Soften a non-spatial state change
When NOT to use it
- Fade critical content so slowly that work is delayed
- Use opacity to hide an element that remains unexpectedly interactive
- Combine large movement with every fade
- Use repeated fades around text people are reading
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
Further reading