Fade animations are the most subtle and versatile animations in the library. They smoothly transition elements in and out using opacity changes, often combined with directional movement.
Basic Fade Animations fade-in
fade-out
blurred-fade-in
Smoothly fades an element from invisible to visible. < div class = "animate-fade-in" > Content appears smoothly </ div >
When to use: Perfect for revealing content, modal overlays, tooltips, or any element that should appear gracefully.Duration: 600ms (default)Smoothly fades an element from visible to invisible. < div class = "animate-fade-out" > Content disappears smoothly </ div >
When to use: Ideal for dismissing notifications, closing modals, or removing elements from view.Duration: 600ms (default)Combines opacity fade with a blur effect for a progressive appearance. < div class = "animate-blurred-fade-in" > Content appears with blur clearing </ div >
When to use: Great for hero sections, image galleries, or creating a dreamy entrance effect.Duration: 900ms (default)Technical: Animates from filter: blur(5px); opacity: 0 to filter: blur(0); opacity: 1Directional Fade In Animations These animations combine fading with directional movement for more dynamic entrances.
Element fades in while moving upward. < div class = "animate-fade-in-up" > Slides up 20px while fading in </ div >
Movement: Starts 20px below, moves to original positionDuration: 600msBest for: List items, card entries, bottom notifications
Element fades in while moving downward. < div class = "animate-fade-in-down" > Slides down 20px while fading in </ div >
Movement: Starts 20px above, moves to original positionDuration: 600msBest for: Dropdown menus, header notifications, top banners
Element fades in while moving from the right. < div class = "animate-fade-in-left" > Slides left 20px while fading in </ div >
Movement: Starts 20px to the right, moves to original positionDuration: 600msBest for: Side panels, navigation drawers (RTL layouts)
Element fades in while moving from the left. < div class = "animate-fade-in-right" > Slides right 20px while fading in </ div >
Movement: Starts 20px to the left, moves to original positionDuration: 600msBest for: Side panels, navigation drawers (LTR layouts)Directional Fade Out Animations fade-out-up
fade-out-down
fade-out-left
fade-out-right
Element fades out while moving upward. < div class = "animate-fade-out-up" > Moves up 20px while fading out </ div >
Movement: Moves 20px upward while opacity reduces to 0Element fades out while moving downward. < div class = "animate-fade-out-down" > Moves down 20px while fading out </ div >
Movement: Moves 20px downward while opacity reduces to 0Element fades out while moving left. < div class = "animate-fade-out-left" > Moves left 20px while fading out </ div >
Movement: Moves 20px to the left while opacity reduces to 0Element fades out while moving right. < div class = "animate-fade-out-right" > Moves right 20px while fading out </ div >
Movement: Moves 20px to the right while opacity reduces to 0Special Fade Animations pulse-fade-in Combines a pulsing scale effect with fading for an attention-grabbing entrance.
< div class = "animate-pulse-fade-in" > Pulses and fades in </ div >
Animation sequence:
Starts at scale 0.9, opacity 0
Expands to scale 1.05, opacity 0.5 at midpoint
Settles at scale 1, opacity 1
Duration: 600msBest for: Call-to-action buttons, important notifications, modal entriesCustomization Examples Fast Fade with Delay < div class = "animate-fade-in animate-duration-fast animate-delay-300" > Quick fade after 300ms delay </ div >
Smooth Fade with Custom Easing < div class = "animate-fade-in-up animate-bezier-cubic-out animate-duration-slower" > Elegant upward fade with cubic easing </ div >
Infinite Subtle Pulse < div class = "animate-fade-in animate-iteration-count-infinite animate-direction-alternate animate-duration-slow" > Continuously fades in and out </ div >
Staggered List Items < ul > < li class = "animate-fade-in-up animate-delay-0" > First item </ li > < li class = "animate-fade-in-up animate-delay-100" > Second item </ li > < li class = "animate-fade-in-up animate-delay-200" > Third item </ li > < li class = "animate-fade-in-up animate-delay-300" > Fourth item </ li > </ ul >
Usage Tips Fade animations work well with fill-mode-forwards to keep the final state after animation completes.
< div class = "animate-fade-in animate-fill-mode-forwards" > Stays visible after animation </ div >
Avoid using fade-out without removing the element from the DOM, as it will remain in the layout but invisible.
Combining with Hover States < div class = "opacity-0 hover:animate-fade-in" > Fades in on hover </ div >
Responsive Animations < div class = "animate-fade-in md:animate-fade-in-left" > Simple fade on mobile, directional on desktop </ div >
Fade animations are highly performant as they only animate opacity (and transform for directional variants)
Opacity changes are GPU-accelerated in modern browsers
The blur filter in blurred-fade-in may be slightly more expensive, use sparingly on low-end devices