Tailwindcss Animations

Tailwind CSS Animations & Transitions

Built-in Animations

Spin

Continuous rotation for loading indicators:

<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>

Ping

Radar-style pulse for notifications:

<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

Pulse

Subtle fade for skeleton loaders:

<div class="animate-pulse flex space-x-4">
  <div class="rounded-full bg-slate-200 h-10 w-10"></div>
  <div class="flex-1 space-y-2 py-1">
    <div class="h-2 bg-slate-200 rounded"></div>
    <div class="h-2 bg-slate-200 rounded w-5/6"></div>
  </div>
</div>

Bounce

Attention-grabbing vertical bounce:

<svg class="animate-bounce w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>

Transitions

Transition Properties

Transition Duration

Transition Timing Functions

Transition Delay

Basic Transition Examples

<!-- Color transition -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Hover me
</button>

<!-- Scale on hover -->
<div class="transform hover:scale-105 transition-transform duration-200">
  Card
</div>

<!-- Opacity transition -->
<div class="opacity-100 hover:opacity-75 transition-opacity duration-150">
  Fade
</div>

<!-- Multiple properties -->
<button class="
  bg-blue-500 hover:bg-blue-700
  transform hover:scale-105
  shadow-md hover:shadow-lg
  transition-all duration-200
">
  Full transition
</button>

Transform Utilities

Scale

<div class="transform scale-100 hover:scale-110 transition-transform">
  Scale up
</div>

<div class="transform scale-100 hover:scale-90 transition-transform">
  Scale down
</div>

<!-- Specific axes -->
<div class="transform hover:scale-x-110">Horizontal</div>
<div class="transform hover:scale-y-110">Vertical</div>

Rotate

<div class="transform hover:rotate-12 transition-transform">
  Rotate right
</div>

<div class="transform hover:-rotate-12 transition-transform">
  Rotate left
</div>

<div class="transform hover:rotate-180 transition-transform duration-500">
  Flip
</div>

Translate

<div class="transform hover:translate-x-2 transition-transform">
  Move right
</div>

<div class="transform hover:-translate-y-2 transition-transform">
  Move up
</div>

Skew

<div class="transform hover:skew-x-3 transition-transform">
  Skew horizontal
</div>

<div class="transform hover:skew-y-3 transition-transform">
  Skew vertical
</div>

Transform Origin

<div class="origin-center transform hover:rotate-45">Center (default)</div>
<div class="origin-top-left transform hover:rotate-45">Top left</div>
<div class="origin-bottom-right transform hover:rotate-45">Bottom right</div>

Custom Animations (v4)

Define in @theme

@theme {
  /* Custom keyframes */
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-shake: shake 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Usage

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>
<div class="animate-shake">Shakes on error</div>

Custom Easing

@theme {
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

<div class="transition-transform ease-bounce duration-300 hover:scale-110">
  Bouncy scale
</div>

Accessibility: Reduced Motion

motion-safe / motion-reduce

<!-- Only animate if user prefers motion -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Respects preferences
</div>

<!-- Alternative: reduced animation -->
<button class="
  motion-safe:transition-all motion-safe:duration-200
  motion-reduce:transition-none
  hover:bg-blue-600
">
  Accessible button
</button>

Reduced Motion Pattern

/* Apply globally */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Animation Patterns

Hover Card Lift

<div class="
  transform transition-all duration-200
  hover:-translate-y-1 hover:shadow-lg
  bg-white rounded-lg p-6 shadow
">
  Card content
</div>

Button Press Effect

<button class="
  transform transition-transform duration-100
  active:scale-95
  bg-blue-500 text-white px-4 py-2 rounded
">
  Click me
</button>

Loading Dots

<div class="flex space-x-1">
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
</div>

Fade In on Scroll (with JS)

<div class="opacity-0 translate-y-4 transition-all duration-500" data-animate>
  Content that fades in
</div>

// Intersection Observer to trigger animation
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.remove('opacity-0', 'translate-y-4')
    }
  })
})

document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el))

Skeleton Loader

<div class="animate-pulse">
  <div class="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

Hamburger to X Animation

<button class="group" aria-label="Toggle menu">
  <span class="block w-6 h-0.5 bg-black transition-all duration-200 group-open:rotate-45 group-open:translate-y-1.5"></span>
  <span class="block w-6 h-0.5 bg-black mt-1 transition-opacity duration-200 group-open:opacity-0"></span>
  <span class="block w-6 h-0.5 bg-black mt-1 transition-all duration-200 group-open:-rotate-45 group-open:-translate-y-1.5"></span>
</button>

Transition on Enter/Leave (with JS)

For complex enter/leave transitions, use a library like Headless UI:

import { Transition } from '@headlessui/react'

function Modal({ isOpen, children }) {
  return (
    <Transition
      show={isOpen}
      enter="transition-opacity duration-300"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="transition-opacity duration-200"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
    >
      {children}
    </Transition>
  )
}

Performance Tips

1. Prefer GPU-Accelerated Properties

<!-- GOOD - GPU accelerated -->
<div class="transform hover:translate-x-2 transition-transform">

<!-- AVOID - May cause repaints -->
<div class="hover:left-2 transition-all">

2. Use Specific Transitions

<!-- GOOD - Only transitions what changes -->
<div class="transition-colors duration-200 hover:bg-blue-500">

<!-- AVOID - Transitions everything -->
<div class="transition-all duration-200 hover:bg-blue-500">

3. Keep Animations Short

<!-- GOOD - Snappy feedback -->
<button class="transition-colors duration-150">

<!-- AVOID - Too slow for UI feedback -->
<button class="transition-colors duration-1000">

4. Use will-change Sparingly

<!-- Only for complex, frequently animated elements -->
<div class="will-change-transform animate-spin">
  Loading spinner
</div>

Tailwind CSS Animation Patterns

CSS Keyframe Animations

Defining Custom Animations

@theme {
  /* Animation definitions */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-fade-out: fade-out 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
  --animate-slide-down: slide-down 0.4s ease-out;
  --animate-scale-in: scale-in 0.2s ease-out;
  --animate-spin-slow: spin 3s linear infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Usage

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>
<div class="animate-scale-in">Scales in</div>

Transition Utilities

Transition Properties

<!-- Specific properties (recommended) -->
<button class="transition-colors duration-200">Color transition</button>
<button class="transition-transform duration-200">Transform transition</button>
<button class="transition-opacity duration-200">Opacity transition</button>
<button class="transition-shadow duration-200">Shadow transition</button>

<!-- Multiple properties -->
<button class="transition-[color,transform] duration-200">Custom</button>

<!-- All properties (use sparingly - performance impact) -->
<button class="transition-all duration-200">All properties</button>

Duration Scale

<div class="transition duration-75">75ms</div>
<div class="transition duration-100">100ms</div>
<div class="transition duration-150">150ms (default)</div>
<div class="transition duration-200">200ms</div>
<div class="transition duration-300">300ms</div>
<div class="transition duration-500">500ms</div>
<div class="transition duration-700">700ms</div>
<div class="transition duration-1000">1000ms</div>

Timing Functions

<div class="transition ease-linear">Linear</div>
<div class="transition ease-in">Ease in</div>
<div class="transition ease-out">Ease out (recommended)</div>
<div class="transition ease-in-out">Ease in-out</div>

<!-- Custom cubic-bezier -->
<div class="transition ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]">
  Bouncy
</div>

Delay

<div class="transition delay-75">75ms delay</div>
<div class="transition delay-100">100ms delay</div>
<div class="transition delay-150">150ms delay</div>
<div class="transition delay-200">200ms delay</div>
<div class="transition delay-300">300ms delay</div>

Interactive Animations

Hover Effects

<!-- Scale on hover -->
<div class="transition-transform duration-200 hover:scale-105">
  Grows on hover
</div>

<!-- Lift effect -->
<div class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
  Lifts on hover
</div>

<!-- Color shift -->
<button class="
  bg-blue-600 text-white
  transition-colors duration-200
  hover:bg-blue-700
">
  Button
</button>

<!-- Multi-property -->
<div class="
  transition-all duration-300
  hover:scale-105 hover:shadow-xl hover:bg-gray-50
">
  Complex hover
</div>

Focus Effects

<input class="
  border border-gray-300
  transition-all duration-200
  focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20
  focus:outline-none
" />

<button class="
  transition-all duration-200
  focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
">
  Accessible focus
</button>

Active States

<button class="
  transition-transform duration-100
  active:scale-95
">
  Press effect
</button>

Group Animations

Group Hover

<div class="group cursor-pointer p-4 border rounded-lg hover:border-blue-500">
  <h3 class="transition-colors group-hover:text-blue-600">Title</h3>
  <p class="transition-colors group-hover:text-gray-600">Description</p>
  <span class="
    inline-block transition-transform
    group-hover:translate-x-1
  ">
    → Read more
  </span>
</div>

Nested Groups

<div class="group/card p-4 border rounded-lg">
  <div class="group/image relative overflow-hidden">
    <img class="
      transition-transform duration-300
      group-hover/image:scale-110
    " />
    <div class="
      absolute inset-0 bg-black/50
      opacity-0 transition-opacity
      group-hover/image:opacity-100
    ">
      Overlay
    </div>
  </div>
  <h3 class="transition-colors group-hover/card:text-blue-600">
    Title
  </h3>
</div>

Staggered Animations

CSS Custom Properties

<div class="space-y-2">
  <div class="animate-slide-up" style="animation-delay: 0ms">Item 1</div>
  <div class="animate-slide-up" style="animation-delay: 100ms">Item 2</div>
  <div class="animate-slide-up" style="animation-delay: 200ms">Item 3</div>
  <div class="animate-slide-up" style="animation-delay: 300ms">Item 4</div>
</div>

React Pattern

{items.map((item, index) => (
  <div
    key={item.id}
    className="animate-slide-up opacity-0"
    style={{
      animationDelay: `${index * 100}ms`,
      animationFillMode: 'forwards',
    }}
  >
    {item.content}
  </div>
))}

Loading Animations

Spinner

<svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">
  <circle
    class="opacity-25"
    cx="12" cy="12" r="10"
    stroke="currentColor"
    stroke-width="4"
    fill="none"
  />
  <path
    class="opacity-75"
    fill="currentColor"
    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
  />
</svg>

Pulse

<div class="animate-pulse flex space-x-4">
  <div class="rounded-full bg-gray-300 h-10 w-10"></div>
  <div class="flex-1 space-y-4 py-1">
    <div class="h-4 bg-gray-300 rounded w-3/4"></div>
    <div class="h-4 bg-gray-300 rounded"></div>
  </div>
</div>

Skeleton

@utility skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-300) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

<div class="skeleton h-4 w-full rounded"></div>

Bounce Dots

<div class="flex space-x-1">
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
</div>

Accessibility

Reduced Motion

<!-- Respect user preferences -->
<div class="
  transition-transform duration-300
  motion-safe:hover:scale-105
  motion-reduce:transition-none
  motion-reduce:hover:scale-100
">
  Respects motion preferences
</div>

CSS Approach

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Performance Tips

GPU-Accelerated Properties

Prefer these for smooth 60fps animations:

• transform (translate, scale, rotate)
• opacity

Avoid animating:

• width, height
• top, left, right, bottom
• margin, padding
• border-width

will-change

<!-- Use sparingly for complex animations -->
<div class="will-change-transform hover:scale-105">
  Optimized for transform
</div>

contain

<!-- Isolate repaints -->
<div class="contain-layout">
  Animation won't affect siblings
</div>

Common Animation Recipes

Modal Entrance

<div class="
  fixed inset-0 bg-black/50
  animate-fade-in
">
  <div class="
    bg-white rounded-xl p-6
    animate-scale-in
  ">
    Modal content
  </div>
</div>

Toast Notification

<div class="
  fixed bottom-4 right-4
  animate-slide-up
  bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg
">
  Notification message
</div>

Menu Dropdown

<div class="
  absolute top-full left-0 mt-2
  origin-top-left
  animate-scale-in
  bg-white rounded-lg shadow-xl
">
  Menu items
</div>