Fade Transition
Choose fade when the best motion is the one users barely notice.
Timing
Use 120-220ms for interface state changes and up to 300ms for larger view swaps.
Easing
Ease-out for entering content; ease-in for exits; crossfades should stay subtle.
Risk
Live Demo
What It Is
A smooth opacity transition between two states, pages, or components to prevent jarring instant visual changes.
Decision Guidance
Choose fade when the best motion is the one users barely notice.
Best For
Simple state changes where spatial direction is not meaningful.
Avoid When
Avoid when users need to understand where an item moved from or where the next view came from.
Timing
Use 120-220ms for interface state changes and up to 300ms for larger view swaps.
Easing
Ease-out for entering content; ease-in for exits; crossfades should stay subtle.
Risk Tags
✓When to Use
- Navigating between tabs
- Opening/closing simple modals
- Revealing deferred content
✕When NOT to Use
- High-energy interactions that need spatial awareness (use slides instead)
Configuration Tips
- 01Keep it short: 150ms-200ms is standard for UI fades
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a fade transition when switching between these tabs.
Code Example (Tailwind CSS)
export function FadeTransition() {}