What is Fade Animation?

Fade Animations gradually change element opacity from 0 (invisible) to 1 (visible) or vice versa. Subtle, gentle transition. Often combined with slide/scale for richer motion. Good for non-disruptive entrances/exits. Common in tooltips, notifications, overlays. Duration: 150-300ms.

When Should You Use This?

Use fade for subtle, non-disruptive transitions: tooltips appearing, modals with backdrop, notifications, loading states, image lazy loading. Often combined with other animations (fade + slide for modals). Fade alone can feel floaty—add slide or scale for direction. Fast fades (150ms) for tooltips, slower (300ms) for modals. Always fade on opacity, not display property.

Common Mistakes to Avoid

• •Too slow—>400ms fades feel sluggish; keep under 300ms
• •Fade without direction—pure fade can feel aimless; combine with slide/scale
• •Animating display property—use opacity + visibility, not display none/block
• •No backdrop fade—modals should fade both content and backdrop together
• •Forgetting z-index—fading elements can overlap; manage stacking context

Real-World Examples

• •Tooltips—fade in 150ms when hovering, fade out 100ms
• •Modal backdrops—fade from transparent to dark overlay
• •Linear—notification toasts fade in bottom-right
• •Medium—image lazy loading with fade-in as they load