fade-in
v1.0.1
Tailwind Animations
The easiest way to add stunning animations to your Tailwind CSS projects. Zero configuration, pure performance.
How to use
@import 'tailwindcss';
@import 'tailwind-animations'; <div class="">
<!-- Applied animation -->
</div>
Animation Collection
Explore our comprehensive library of ready-to-use animations. Customize duration, delay, and timing to fit your needs with zero configuration.
blurred-fade-in
zoom-in
slide-in-top
bouncing
pulsing
shake
tada
jelly
flip-horizontal
swing
wobble
rotate-360
fade-in-up
slide-in-left
Scroll Animations
Animate elements based on their position in the viewport using the timeline-view utility.
Scroll down to see the magic
To animate elements on scroll, we use the timeline-view utility. This property creates a View Timeline that allows you to
synchronize the animation with the element's displacement within the
viewport.
The animation is automatically linked to the element's visibility
in the viewport. Use animate-range to control when the animation starts and ends relative to the element's
visibility.
I reveal on scroll
timeline-view animate-zoom-in animate-range-cover
The animate-range property is essential
for defining when the animation starts and ends relative to the element's
visibility. You can use predefined ranges like gradual, moderate, brisk, or rapid to easily control the
animation's pace.
Gradual (10% - 90%)
animate-range-gradual
Moderate (20% - 80%)
animate-range-moderate
Brisk (30% - 70%)
animate-range-brisk
Rapid (40% - 60%)
animate-range-rapid
Of course, you can also use custom values for more precision. By
specifying values like entry 10% or contain 25%, you can
perfectly time the reveal effect to match your design's flow.
I fade in from the left
timeline-view animate-slide-in-left
animate-range-[entry_5%_contain_20%]
You can combine different directions and effects. Using animate-slide-in-left with a scroll timeline makes the element gracefully slide into place
while adjusting its opacity, synchronized with the user's scrolling
speed for a more interactive feel.
Blurred transitions like animate-blurred-fade-in add a layer of polish. By linking it to a scroll timeline, you create
a depth-of-field effect that naturally draws attention to the content
as it becomes clear and focused.
Scroll & View Timelines
Link animations to scroll progress or element visibility using powerful timeline utilities.
Vertical Scroll Progress
Use timeline-scroll to link an
animation to the scroll container's progress. The animation advances
as you scroll.
↓ Scroll down to see the progress bar fill
timeline-scroll animate-expand-horizontally
Horizontal Scroll Progress
Use timeline-[scroll(inline)]
for horizontal scroll containers. The progress bar follows your horizontal
scrolling.
🚀
⭐
💎
🎯
🔥
✨
🎨
💡
timeline-[scroll(inline)] animate-expand-horizontally
Entry & Exit Animation Ranges
Control when animations play with animate-range-entry (entering viewport) and animate-range-exit (leaving viewport).
↓ Scroll to see entry/exit animations
animate-range-entry
animate-range-exit
Staggered Reveal Effect
Combine timeline-view with different
animate-range
values to create a staggered reveal effect.
↓ Scroll to reveal cards in sequence
First
Second
Third
Fourth
animate-range-[entry_0%_cover_30%] → [entry_10%_cover_40%] → ...
Rotation on Scroll
Use animate-rotate-360 with
animate-range-cover to rotate elements
as they pass through the viewport.
↓ Scroll to spin the shapes
🎲
animate-rotate-360
animate-spin-clockwise
animate-flip-x
Timeline Utilities Reference
Available timeline utilities and how to use them:
Scroll Timelines
timeline-scroll timeline-[scroll(x)] timeline-[scroll(y)] timeline-[scroll(block)] timeline-[scroll(inline)] View Timelines
timeline-view timeline-[view(x)] timeline-[view(y)] timeline-[view(block)] timeline-[view(inline)] Animation Ranges
animate-range-cover animate-range-contain animate-range-entry animate-range-exit Preset Ranges
animate-range-gradual (10%-90%) animate-range-moderate (20%-80%) animate-range-brisk (30%-70%) animate-range-rapid (40%-60%) Arbitrary Values
Use brackets for custom values. Use underscores _ instead of spaces.
Scroll with axis
timeline-[scroll(x_root)] timeline-[scroll(y_nearest)] View with inset
timeline-[view(block)] timeline-[view(x_200px_auto)] Custom animation ranges
animate-range-[entry_0%_cover_50%] animate-range-[cover_25%_cover_75%] animate-range-[exit_-10%_exit_100%]
Top layer patterns
Dialog Entry & Exit Effects
Native <dialog> elements start
from display: none. The animate-dialog utility wraps @starting-style,
display, overlay, and allow-discrete into one class.
Live demo
Add
Add animate-dialog and style
the rest with normal Tailwind utilities.
Open the dialog and close it with the button, Escape, or by clicking the backdrop. The plugin class owns the entry and exit motion; the component markup stays native.
class="animate-dialog ..."
dialog.html
<button
type="button"
commandfor="motion-dialog"
command="show-modal"
>
Open dialog
</button>
<dialog
id="motion-dialog"
class="animate-dialog m-auto max-w-lg rounded-2xl bg-white p-6 shadow-2xl"
aria-labelledby="dialog-title"
>
<h2 id="dialog-title">Motion with a real dialog</h2>
<p>
One plugin class handles @starting-style, display, overlay,
the entry motion, the exit motion, and the backdrop fade.
</p>
<button
type="button"
commandfor="motion-dialog"
command="request-close"
>
Close
</button>
</dialog>
Modifier examples
Same utility, different dialog feel
Stack one motion modifier and one duration modifier on top of
animate-dialog; the rest is
still regular Tailwind styling.
Command
from-top + fast Top drawer
A compact palette that enters from the top edge.
Panel
from-right + 500 Side panel
A settings surface that slides in horizontally.
Confirm
zoom + slow Zoom confirm
A centered decision dialog with a slower scale effect.
Quiet
fade + 200 Fade notice
A subtle notification dialog with almost no movement.