Quick Start Guide This guide will help you create your first animated elements using tailwind-animations. You’ll learn the basics of applying animations, customizing timing, and combining effects.
Your First Animation
Install and Configure
First, make sure you have tailwind-animations installed and configured. If you haven’t done this yet, follow the installation guide . Quick recap: npm install tailwind-animations
@import 'tailwindcss' ; @import 'tailwind-animations' ;
Add Your First Animation
Add a simple fade-in animation to an element: < div class = "animate-fade-in" > < h1 > Welcome to Tailwind Animations! </ h1 > </ div >
That’s it! Your element will now fade in smoothly when it appears on the page.
Customize the Animation
Make the animation slower and add a delay: < div class = "animate-fade-in animate-duration-slow animate-delay-300" > < h1 > Welcome to Tailwind Animations! </ h1 > </ div >
The element will now wait 300ms before starting a slow fade-in (400ms duration). Common Animation Patterns Here are some popular animation patterns you can use right away:
Fade Animations Smooth opacity transitions for appearing and disappearing elements:
<!-- Simple fade in --> < div class = "animate-fade-in" > Fade in box </ div > <!-- Fade in from bottom --> < div class = "animate-fade-in-up" > Content slides up while fading in </ div > <!-- Fade in from left --> < div class = "animate-fade-in-left" > Content slides from left while fading in </ div > <!-- Blurred fade in --> < div class = "animate-blurred-fade-in" > Progressive blur removal with fade in </ div >
Slide Animations Elements that slide in from different directions:
<!-- Slide in from bottom --> < div class = "animate-slide-in-bottom" > Notification message </ div > <!-- Slide in from top with delay --> < div class = "animate-slide-in-top animate-delay-200" > Header banner </ div > <!-- Slide from left, slow --> < div class = "animate-slide-in-left animate-duration-slower" > Side panel </ div >
Zoom & Pop Animations Great for drawing attention to important elements:
<!-- Zoom in effect --> < div class = "animate-zoom-in" > < button > Click me! </ button > </ div > <!-- Pop effect (grows and shrinks) --> < div class = "animate-pop" > < span class = "badge" > New </ span > </ div > <!-- Scale on hover --> < button class = "animate-scale hover:animate-play-paused" > Hover to pause </ button >
Rotation Animations Add spinning and rotating effects:
<!-- Rotate 360 degrees --> < div class = "animate-rotate-360" > < svg > Loading spinner </ svg > </ div > <!-- Infinite spin --> < div class = "animate-spin-clockwise animate-iteration-count-infinite" > ⚙️ </ div > <!-- Rotate on entry --> < div class = "animate-rotate-in" > Card content </ div >
Building a Complete Example Let’s create a hero section with multiple animated elements:
< section class = "min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white p-8" > <!-- Main heading: fades in from top --> < h1 class = "text-6xl font-bold mb-4 animate-fade-in-down" > Welcome </ h1 > <!-- Subtitle: fades in with delay --> < p class = "text-xl mb-8 animate-fade-in animate-delay-300" > Experience the power of Tailwind Animations </ p > <!-- CTA Button: zooms in with longer delay --> < button class = "px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold animate-zoom-in animate-delay-500 hover:animate-tada" > Get Started </ button > <!-- Feature cards: slide up with staggered delays --> < div class = "grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 max-w-6xl" > < div class = "bg-white/10 backdrop-blur-lg p-6 rounded-xl animate-slide-up-fade animate-delay-700" > < h3 class = "text-2xl font-bold mb-2" > Fast </ h3 > < p > Lightning-quick CSS animations </ p > </ div > < div class = "bg-white/10 backdrop-blur-lg p-6 rounded-xl animate-slide-up-fade animate-delay-900" > < h3 class = "text-2xl font-bold mb-2" > Easy </ h3 > < p > Simple utility classes </ p > </ div > < div class = "bg-white/10 backdrop-blur-lg p-6 rounded-xl animate-slide-up-fade animate-delay-1000" > < h3 class = "text-2xl font-bold mb-2" > Powerful </ h3 > < p > 70+ pre-built animations </ p > </ div > </ div > </ section >
Customization Options Duration Control how long animations take:
<!-- 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 </ 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 > < div class = "animate-fade-in animate-duration-700" > 700ms </ div >
Delay Add a delay before the animation starts:
< div class = "animate-fade-in animate-delay-100" > Delay 100ms </ div > < div class = "animate-fade-in animate-delay-300" > Delay 300ms </ div > < div class = "animate-fade-in animate-delay-500" > Delay 500ms </ div >
Use staggered delays to create a cascading effect when animating multiple elements.
Iterations Control how many times an animation repeats:
<!-- Play once (default) --> < div class = "animate-bounce-fade-in animate-iteration-count-once" > Once </ div > <!-- Play twice --> < div class = "animate-tada animate-iteration-count-twice" > Twice </ div > <!-- Play three times --> < div class = "animate-heartbeat animate-iteration-count-thrice" > Thrice </ div > <!-- Loop forever --> < div class = "animate-pulse animate-iteration-count-infinite" > Infinite </ div >
Direction Change the playback direction:
<!-- Normal direction --> < div class = "animate-slide-in-bottom animate-direction-normal" > Normal </ div > <!-- Reverse --> < div class = "animate-slide-in-bottom animate-direction-reverse" > Reverse </ div > <!-- Alternate (forward then backward) --> < div class = "animate-wobble animate-direction-alternate animate-iteration-count-infinite" > Alternating </ div >
Easing Functions Apply custom timing functions for smoother animations:
<!-- Standard easing --> < div class = "animate-fade-in animate-ease-in" > Ease in </ div > < div class = "animate-fade-in animate-ease-out" > Ease out </ div > < div class = "animate-fade-in animate-ease-in-out" > Ease in-out </ div > <!-- Cubic bezier curves --> < div class = "animate-slide-in-bottom animate-bezier-cubic-out" > Cubic out </ div > < div class = "animate-zoom-in animate-bezier-back-out" > Back out (overshoot) </ div > < div class = "animate-fade-in-up animate-bezier-expo-out" > Exponential out </ div >
Interactive Animations Pause on Hover < div class = "animate-spin-clockwise animate-iteration-count-infinite hover:animate-play-paused" > Hover to pause </ div >
Multiple State Changes < button class = "px-4 py-2 bg-blue-500 text-white rounded animate-fade-in hover:animate-tada active:animate-jiggle" > Interactive Button </ button >
Animate elements based on their position in the viewport:
<!-- Animate when element enters viewport --> < div class = "w-full h-64 bg-gradient-to-r from-purple-500 to-pink-500 animate-zoom-in view-animate-[--entrance] animate-range-[entry_10%_contain_25%]" > Animates when scrolling into view </ div > <!-- Rotate while scrolling --> < div class = "animate-rotate-360 timeline-scroll animate-duration-slower" > Rotates as you scroll </ div >
View Timeline and Scroll Timeline features use modern CSS and may not be supported in all browsers. Check caniuse.com for browser compatibility. Tips for Great Animations Keep it subtle : Animations should enhance the user experience, not distract from it. Start with shorter durations and fewer effects.
Use delays for sequencing : When animating multiple elements, add staggered delays to create a natural flow.
Respect user preferences : Consider users who prefer reduced motion. You can use Tailwind’s motion-safe: and motion-reduce: variants:< div class = "motion-safe:animate-fade-in motion-reduce:opacity-100" > Respects user preferences </ div >
Test on different devices : Animation performance can vary. Test on mobile devices to ensure smooth 60fps animations.
Next Steps Now that you understand the basics, explore more advanced features:
Full Animation Catalog Browse all 70+ available animations with live examples
Advanced Customization Learn about custom timing functions, fill modes, and more
View Timeline Guide Create scroll-driven animations with View Timeline
Best Practices Performance tips and accessibility guidelines