Tailwind CSS Animations — From Basics to Stunning Effects in 2025

Tailwind CSS ships with a handful of built-in animations. But with just a few lines of custom configuration, you can unlock a full motion design system — no JavaScript library required.

This guide covers everything: built-in utilities, custom keyframe configuration, and 12 battle-tested animation recipes you can copy-paste directly into your project.

Tailwind's Built-In Animations

Tailwind ships with four animations out of the box:

Class	Effect	Use Case
`animate-spin`	Continuous 360° rotation	Loading spinners
`animate-ping`	Scale + fade out	Live indicators, notifications
`animate-pulse`	Opacity 50%→100%	Skeleton loading states
`animate-bounce`	Up/down bounce	Scroll cues, alerts

<!-- Loading spinner -->
<div class="animate-spin h-8 w-8 border-4 border-purple-500 border-t-transparent rounded-full" />

<!-- Live indicator (green dot) -->
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
  <span class="relative inline-flex h-3 w-3 rounded-full bg-green-500" />
</span>

<!-- Skeleton loading -->
<div class="animate-pulse bg-slate-700 rounded h-4 w-3/4" />

<!-- Scroll prompt -->
<div class="animate-bounce text-white/60 text-sm">↓ Scroll</div>

These cover maybe 10% of what you'll actually need. The rest comes from custom configuration.

Custom Animations in `tailwind.config.ts`

Tailwind v3+ lets you define unlimited custom keyframe animations in your config:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      keyframes: {
        // Define keyframes here
        'fade-in': {
          '0%':   { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-up': {
          '0%':   { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        'gradient-flow': {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%':       { backgroundPosition: '100% 50%' },
        },
      },
      animation: {
        // Reference keyframes with timing
        'fade-in':       'fade-in 0.5s ease-out forwards',
        'slide-up':      'slide-up 0.5s ease-out forwards',
        'gradient-flow': 'gradient-flow 6s ease infinite',
      },
    },
  },
};

export default config;

Now you can use these as regular Tailwind classes:

<div class="animate-fade-in">I fade in!</div>
<h1 class="animate-slide-up">I slide up!</h1>

12 Copy-Paste Animation Recipes

Recipe 1: Fade In on Page Load

The most fundamental animation. Every element on your page should fade in, not just appear.

// tailwind.config.ts — keyframes
'fade-in': {
  from: { opacity: '0' },
  to:   { opacity: '1' },
},
'fade-in-up': {
  from: { opacity: '0', transform: 'translateY(16px)' },
  to:   { opacity: '1', transform: 'translateY(0)' },
},

// animations
'fade-in':    'fade-in 0.4s ease-out forwards',
'fade-in-up': 'fade-in-up 0.5s ease-out forwards',

<section class="animate-fade-in">
  <h1 class="animate-fade-in-up [animation-delay:100ms]">Headline</h1>
  <p class="animate-fade-in-up [animation-delay:200ms]">Subheadline</p>
  <button class="animate-fade-in-up [animation-delay:300ms]">CTA</button>
</section>

Recipe 2: Animated Gradient Background

// keyframes
'gradient-shift': {
  '0%':   { backgroundPosition: '0% 50%' },
  '50%':  { backgroundPosition: '100% 50%' },
  '100%': { backgroundPosition: '0% 50%' },
},

// animation
'gradient-bg': 'gradient-shift 12s ease infinite',

<div
  class="min-h-screen animate-gradient-bg"
  style="
    background: linear-gradient(-45deg, #1e1b4b, #4c1d95, #0f172a, #164e63);
    background-size: 400% 400%;
  "
>
  Content on animated background
</div>

Recipe 3: Floating / Levitating Element

Perfect for product screenshots, hero illustrations, and feature icons.

// keyframes
'float': {
  '0%, 100%': { transform: 'translateY(0)' },
  '50%':      { transform: 'translateY(-12px)' },
},

// animation
'float': 'float 4s ease-in-out infinite',

<img
  src="/product-screenshot.png"
  class="animate-float rounded-2xl shadow-2xl"
  alt="Product screenshot"
/>

Recipe 4: Shimmer Loading Skeleton

// keyframes
'shimmer': {
  '0%':   { backgroundPosition: '-200% 0' },
  '100%': { backgroundPosition:  '200% 0' },
},

// animation
'shimmer': 'shimmer 1.5s infinite',

<!-- Blog post card skeleton -->
<div class="rounded-2xl border border-slate-800 p-6 space-y-3">
  <div
    class="h-5 w-3/4 rounded animate-shimmer"
    style="background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%;"
  />
  <div
    class="h-4 w-full rounded animate-shimmer [animation-delay:75ms]"
    style="background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%;"
  />
  <div
    class="h-4 w-5/6 rounded animate-shimmer [animation-delay:150ms]"
    style="background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%;"
  />
</div>

Recipe 5: Staggered Grid Reveal

// Same fade-in-up as Recipe 1

<div class="grid grid-cols-3 gap-6">
  <div class="animate-fade-in-up [animation-delay:0ms]">Card 1</div>
  <div class="animate-fade-in-up [animation-delay:100ms]">Card 2</div>
  <div class="animate-fade-in-up [animation-delay:200ms]">Card 3</div>
  <div class="animate-fade-in-up [animation-delay:300ms]">Card 4</div>
  <div class="animate-fade-in-up [animation-delay:400ms]">Card 5</div>
  <div class="animate-fade-in-up [animation-delay:500ms]">Card 6</div>
</div>

In React, generate these dynamically:

{features.map((feature, i) => (
  <div
    key={feature.id}
    className="animate-fade-in-up"
    style={{ animationDelay: `${i * 100}ms` }}
  >
    <FeatureCard {...feature} />
  </div>
))}

Recipe 6: Morphing Blob

// keyframes
'blob': {
  '0%':   { borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' },
  '25%':  { borderRadius: '30% 60% 70% 40% / 50% 60% 30% 60%' },
  '50%':  { borderRadius: '50% 60% 30% 60% / 30% 40% 60% 70%' },
  '75%':  { borderRadius: '60% 40% 50% 30% / 60% 70% 40% 50%' },
  '100%': { borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' },
},

// animation
'blob': 'blob 8s ease-in-out infinite',

<div class="relative w-72 h-72">
  <div class="absolute inset-0 animate-blob bg-gradient-to-br from-purple-500 to-pink-500 opacity-70 blur-xl" />
  <div class="absolute inset-4 animate-blob bg-gradient-to-br from-blue-500 to-cyan-500 opacity-70 blur-lg [animation-delay:-4s]" />
</div>

Recipe 7: Typewriter Text

// keyframes
'typewriter': {
  from: { width: '0' },
  to:   { width: '100%' },
},
'blink': {
  '0%, 100%': { borderColor: 'transparent' },
  '50%':      { borderColor: 'currentColor' },
},

// animations
'typewriter': 'typewriter 2s steps(30) forwards',
'cursor':     'blink 0.75s step-end infinite',

<h1 class="font-mono text-4xl text-white">
  <span
    class="inline-block overflow-hidden whitespace-nowrap border-r-2 border-white animate-typewriter animate-cursor"
    style="width: 0"
  >
    Build stunning animations.
  </span>
</h1>

Recipe 8: Gradient Text

No custom keyframes needed — Tailwind's animate-gradient-bg from Recipe 2 applies here:

<h1 class="text-6xl font-bold">
  Build with
  <span
    class="animate-gradient-bg bg-clip-text text-transparent"
    style="
      background: linear-gradient(90deg, #a855f7, #ec4899, #06b6d4, #a855f7);
      background-size: 300% auto;
      -webkit-background-clip: text;
    "
  >
    Animation Web
  </span>
</h1>

Recipe 9: Card Hover Lift

Pure Tailwind, no keyframes needed:

<div class="
  rounded-2xl border border-slate-800 bg-slate-900 p-6
  transition-all duration-300 ease-out
  hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/10
  hover:border-slate-700
  cursor-pointer
">
  <h3 class="text-white font-semibold">Feature Card</h3>
  <p class="text-slate-400 mt-2">Hover me to see the lift effect.</p>
</div>

Recipe 10: Notification Badge Ping

<button class="relative px-6 py-3 rounded-xl bg-slate-800 text-white">
  Notifications
  <span class="absolute -top-1 -right-1 flex h-4 w-4">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75" />
    <span class="relative inline-flex h-4 w-4 rounded-full bg-red-500 text-white text-xs items-center justify-center font-bold">
      3
    </span>
  </span>
</button>

Recipe 11: Progress Bar Animation

// keyframes
'progress': {
  from: { width: '0%' },
  to:   { width: 'var(--progress)' },
},

// animation
'progress': 'progress 1s ease-out forwards',

<div class="w-full bg-slate-800 rounded-full h-2">
  <div
    class="h-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 animate-progress"
    style="--progress: 75%; animation-delay: 300ms;"
  />
</div>

Recipe 12: Border Beam Glow

// keyframes
'border-beam': {
  '0%':   { backgroundPosition: '0% 50%' },
  '100%': { backgroundPosition: '200% 50%' },
},

// animation
'border-beam': 'border-beam 3s linear infinite',

<!-- Wrapper with padding for the gradient border -->
<div class="p-[1px] rounded-2xl animate-border-beam"
  style="
    background: linear-gradient(90deg, transparent, #a855f7, #ec4899, transparent);
    background-size: 200% 100%;
  "
>
  <div class="rounded-[15px] bg-slate-950 p-6">
    <h3 class="text-white font-semibold">Premium Feature</h3>
    <p class="text-slate-400 mt-2">Highlighted with an animated border beam.</p>
  </div>
</div>

Tailwind Animation Utilities Cheat Sheet

<!-- Duration modifiers (combine with any animate-* class) -->
duration-75   duration-100   duration-150   duration-200
duration-300   duration-500   duration-700   duration-1000

<!-- Delay modifiers -->
[animation-delay:100ms]   [animation-delay:200ms]   [animation-delay:500ms]

<!-- Timing functions -->
ease-linear   ease-in   ease-out   ease-in-out

<!-- Iteration -->
[animation-iteration-count:infinite]
[animation-iteration-count:2]

<!-- Fill mode -->
[animation-fill-mode:forwards]
[animation-fill-mode:both]

<!-- Play state -->
[animation-play-state:paused]
[animation-play-state:running]

<!-- Reduced motion -->
motion-reduce:animate-none   motion-safe:animate-bounce

Bringing It Together

The best animated sites combine these recipes thoughtfully:

Page load → Staggered fade-in-up for hero content
Background → Subtle gradient shift or floating blobs
Features section → Scroll-triggered card reveals
CTA button → Hover lift + shimmer sweep
Loading states → Shimmer skeletons everywhere

The key is restraint. Pick 2-3 animation styles and use them consistently throughout your site. Mixing too many different animations creates visual chaos.

Start with Pre-Built Templates

Building all of this from scratch is time-consuming. The Animation Web library gives you hundreds of pre-built animated sections — each implemented in clean Tailwind CSS, ready to drop into your project.

Browse Animation Web Section Templates to find the perfect starting point.

Tailwind CSS Animations — From Basics to Stunning Effects in 2025

Tailwind CSS Animations — From Basics to Stunning Effects in 2025

Tailwind's Built-In Animations

Custom Animations in `tailwind.config.ts`

12 Copy-Paste Animation Recipes

Recipe 1: Fade In on Page Load

Recipe 2: Animated Gradient Background

Recipe 3: Floating / Levitating Element

Recipe 4: Shimmer Loading Skeleton

Recipe 5: Staggered Grid Reveal

Recipe 6: Morphing Blob

Recipe 7: Typewriter Text

Recipe 8: Gradient Text

Recipe 9: Card Hover Lift

Recipe 10: Notification Badge Ping

Recipe 11: Progress Bar Animation

Recipe 12: Border Beam Glow

Tailwind Animation Utilities Cheat Sheet

Bringing It Together

Start with Pre-Built Templates

AnimationWeb

Product

Resources