Skip to main content

​
Awesome Tailwind Animations

Get your animations easily done with only Tailwind CSS classes. This library provides a comprehensive and exhaustive set of 70+ ready-to-use CSS animations through simple utility classes that integrate seamlessly with Tailwind CSS v4. Created and maintained by Miguel Ángel Durán (@midudev) in collaboration with an active community, tailwind-animations brings powerful, performant animations to your projects without writing a single line of custom CSS.

​
Key Features

70+ Predefined Animations

Exhaustive set of ready-to-use animations including fades, slides, zooms, rotations, flips, and more

Granular Control

Fine-tune animations with utility classes for duration, delay, iterations, direction, and easing

View Timeline Support

Trigger animations based on element position in the viewport for scroll-driven effects

CSS-Only Solution

Zero JavaScript dependencies, tree-shakeable, and performance optimized with CSS variables

Advanced Easing Functions

Predefined cubic bezier curves including Sine, Quad, Cubic, Quart, Quint, Expo, Circ, and Back variants

Scroll Timeline Support

Link animations directly to user scrolling for engaging interactive experiences

​
Quick Start

Installation

Install and configure tailwind-animations in your project

Quick Start Guide

Get your first animation working in minutes

Animation Catalog

Browse all 70+ available animations with examples

​
Why Tailwind Animations?

​
Simple and Intuitive

Add animations to your elements with simple, readable class names: 
<div class="animate-fade-in">
  Fade in box
</div>

​
Highly Customizable

Combine utility classes to create exactly the animation you need: 
<div class="animate-slide-in-bottom animate-delay-300 animate-duration-slow">
  Slow animation after 300ms to slide in from bottom
</div>

​
Modern CSS Features

Leverage cutting-edge CSS features like View Timeline and Scroll Timeline: 
<div class="animate-zoom-in view-animate-[--entrance] animate-range-[entry_10%_contain_25%]">
  Animates when entering the viewport
</div>

​
Performance

Tree-shakeable: Only the animations you use are included in your production build, keeping your CSS bundle size minimal.
Tailwind Animations is built with performance in mind:
  • CSS-only: No JavaScript overhead or runtime dependencies
  • GPU-accelerated: Uses transform and opacity properties for smooth 60fps animations
  • Optimized with CSS variables: Maximum efficiency and flexibility
  • Production-ready: Battle-tested in real-world applications

​
Community-Driven

Tailwind Animations is actively maintained and welcomes community contributions. Join hundreds of developers who have contributed to making this library better.

GitHub Repository

Star the project, report issues, or contribute

NPM Package

View package details and download statistics

​
Ready to Get Started?

Follow our installation guide to add tailwind-animations to your project in minutes.

Installation Guide

Install tailwind-animations and start animating

Build docs developers (and LLMs) love

Get started for freeTalk to us