Tailwind CSS Animations

v1.0.2

79+ ready-to-use animation utilities for Tailwind CSS. Zero config, pure CSS performance.

Open Playground
$ npm install tailwind-animations 
@import 'tailwindcss';
@import 'tailwind-animations';
demo_preview.html

Example animation utility class in use:

Animation Collection

79+ utilities. Hover to preview, click to copy.

Customize animation duration, delay, and steps for previews

When enabled, every animation preview plays in a continuous loop. When disabled, previews play on hover or keyboard focus.

fade-in
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
New utility

Customize slide distance

Pair any animate-slide-* utility with animate-slide-distance-* to control how far it travels. Default stays 20px—no breaking change.

Hover a card (or press Replay) to compare the same slide with different distances. Direction is built into each slide utility—use a positive length or percentage.

Default

20px

Built-in travel when you only use a slide utility.

animate-slide-in-right

Full width

100%

Slide the full element width—great for off-canvas reveals.

animate-slide-in-right animate-slide-distance-[100%]

Large offset

6rem

A longer entrance without writing custom keyframes.

animate-slide-in-left animate-slide-distance-[6rem]
slide-distance.html 
<div class="animate-slide-in-right animate-slide-distance-[100%]">
  Full-width slide entrance
</div>

<div class="animate-slide-in-top animate-slide-distance-[10rem]">
  Tall offset from above
</div>

Scroll-Driven CSS Animations

Animate elements based on their position in the viewport using the timeline-view Tailwind utility—no JavaScript scroll listeners required.

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.

I fade in with blur timeline-view animate-blurred-fade-in animate-range-[entry_10%_contain_30%]

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 Timeline Utilities

Link Tailwind CSS animations to scroll progress or element visibility using timeline utilities for modern, scroll-driven motion.

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

Entry Animation
Plays when entering
Exit Animation
Plays when leaving
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 Tailwind class for smooth modal open and close animations.

Live demo

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 ..."
Modal top layer

Dialog motion without wrapper divs

The animate-dialog utility transitions opacity, translate, scale, display, overlay, and the backdrop. No component-level CSS is needed.

Entry @starting-style
Exit overlay + display allow-discrete
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.

Command

Command palette

Use this variation for short-lived command surfaces and quick search flows.

animate-dialog animate-dialog-from-top animate-dialog-duration-fast
Panel from-right + 500

Side panel

A settings surface that slides in horizontally.

Panel

Workspace settings

Directional modifiers work well for panels that feel attached to an edge.

animate-dialog animate-dialog-from-right animate-dialog-duration-500
Confirm zoom + slow

Zoom confirm

A centered decision dialog with a slower scale effect.

Confirm

Publish changes

Scale-only motion keeps destructive or confirmation flows focused.

animate-dialog animate-dialog-zoom animate-dialog-duration-slow
Quiet fade + 200

Fade notice

A subtle notification dialog with almost no movement.

Quiet

Session saved

Fade variants are useful when movement would distract from short copy.

animate-dialog animate-dialog-fade animate-dialog-duration-200

Frequently Asked Questions

Everything you need to know about the Tailwind CSS animations plugin.

What is tailwind-animations?

An open-source Tailwind CSS plugin that ships 79+ animation utility classes—fade, slide, zoom, bounce, flip, scroll-driven motion, and native dialog effects—so you can animate UI without writing custom keyframes.

How do I install it?

Run npm install tailwind-animations (or pnpm / yarn / bun / deno), then add @import 'tailwindcss'; and @import 'tailwind-animations'; to your global CSS for Tailwind v4.

Does it work with Tailwind CSS v3 and v4?

Yes. The current package targets Tailwind CSS v4 via CSS imports. For Tailwind v3, use the legacy package @midudev/tailwind-animations@0.2.0.

How do I use an animation utility class?

Add classes like animate-fade-in or animate-slide-in-bottom to any element. Combine them with animate-duration-*, animate-delay-*, and animate-steps-* to control timing.

Can I change how far a slide animation travels?

Yes. Pair any animate-slide-* utility with animate-slide-distance-[…] (for example animate-slide-distance-[100%] or animate-slide-distance-[10rem]). The default distance stays 20px if you omit it.

Can I build scroll-based animations?

Yes. Use timeline-view with animate-range utilities to tie CSS animations to an element position in the viewport—no scroll event listeners needed.

Is it free and open source?

Yes. The project is MIT licensed, free to use commercially, and open for contributions on GitHub at midudev/tailwind-animations.