Motion
Fade
motionanimationopacitytransitionentrance
An element transitions in or out by changing its opacity from 0 to 1 or vice versa.
When to use
- Entering/exiting overlays, tooltips, and modals
- Transitioning between page-level route changes
- Revealing content on scroll as a subtle entrance
Examples
- Modal backdrop fading in behind dialog
- Toast notification fading out after 3 seconds
See this in the wild
Analyze a site and look for fade in the breakdown.
