Tailwind Animations provides 70+ ready-to-use CSS animations through simple utility classes. All animations are CSS-only, performant, and fully customizable.
Animation Categories
Fade Animations Smooth appearance and disappearance effects with directional fading
Slide Animations Entry and exit animations with directional sliding movements
Zoom & Scale Scaling effects for emphasis and smooth zoom transitions
Rotation Rotate elements with precise angles or continuous spinning
Flip Animations 3D flip effects on horizontal and vertical axes
Movement & Motion Bouncing, swaying, wobbling, and other dynamic movements
Interactive & Fun Playful animations for user interactions and celebrations
Quick Start Add any animation to your elements using the animate-* utility class:
< div class = "animate-fade-in" > Smoothly fades in </ div >
Customization Every animation can be customized with control utilities:
Duration <!-- Semantic names --> < div class = "animate-fade-in animate-duration-faster" > 100ms </ div > < div class = "animate-fade-in animate-duration-fast" > 200ms </ div > < div class = "animate-fade-in animate-duration-normal" > 300ms (default) </ div > < div class = "animate-fade-in animate-duration-slow" > 400ms </ div > < div class = "animate-fade-in animate-duration-slower" > 500ms </ div > <!-- Numeric values --> < div class = "animate-fade-in animate-duration-250" > 250ms </ div >
Delay < div class = "animate-fade-in animate-delay-300" > Starts after 300ms </ div >
Available delays: 0, 100, 150, 200, 250, 300, 400, 500, 700, 800, 900, 1000 (in ms)
Iteration Count < div class = "animate-bounce animate-iteration-count-infinite" > Bounces forever </ div > < div class = "animate-tada animate-iteration-count-thrice" > Plays 3 times </ div >
Options: once, twice, thrice, infinite
Direction < div class = "animate-slide-in-top animate-direction-alternate" > Alternates forward and backward </ div >
Options: normal, reverse, alternate, alternate-reverse
Fill Mode < div class = "animate-zoom-in animate-fill-mode-forwards" > Maintains final state after animation </ div >
Options: forwards, backwards, both
Easing Functions <!-- Standard --> < div class = "animate-fade-in animate-ease-in-out" > Smooth ease </ div > <!-- Advanced cubic bezier --> < div class = "animate-slide-in-bottom animate-bezier-cubic-out" > Custom easing curve </ div >
Available cubic bezier curves:
Sine : sine-in, sine-out, sine-in-outQuad : quad-in, quad-out, quad-in-outCubic : cubic-in, cubic-out, cubic-in-outQuart : quart-in, quart-out, quart-in-outQuint : quint-in, quint-out, quint-in-outExpo : expo-in, expo-out, expo-in-outCirc : circ-in, circ-out, circ-in-outBack : back-in, back-out, back-in-out
Play State < div class = "animate-spin-clockwise hover:animate-play-paused" > Pauses on hover </ div >
Advanced Features Animate elements based on scroll position:
< div class = "animate-rotate-360 timeline-scroll" > Rotates as you scroll </ div >
View Timeline Animations Trigger animations when elements enter the viewport:
< div class = "animate-zoom-in view-animate-[--entrance] animate-range-[entry_10%_contain_25%]" > Animates when entering viewport </ div >
Retro/Pixel-Style Animations Create step-based animations for a retro effect:
< div class = "animate-rotate-360 animate-steps-retro animate-iteration-count-infinite" > 8-step pixel rotation </ div >
Options: retro (8 steps), normal (16 steps), modern (24 steps)
Combining Animations Stack multiple utilities for complex effects:
< button class = "animate-tada animate-delay-200 animate-duration-slow animate-iteration-count-infinite animate-direction-alternate hover:animate-play-paused animate-bezier-back-out" > Click me! </ button >
Best Practices Use animations sparingly to avoid overwhelming users. Reserve animations for important UI moments.
Respect user preferences by checking for prefers-reduced-motion in your CSS.
Choose appropriate durations (faster for small elements, slower for large ones)
Use delays to create staggered effects for multiple elements
Combine animate-fill-mode-forwards to maintain the final state
Test animations on different devices and screen sizes