Tailwind CSS - Transitions & Animation

Modern Tailwind CSS: Transitions & Animations

In modern web development, transitions and animations are crucial for creating engaging and intuitive user interfaces. They provide visual feedback and guide the user’s attention. Tailwind CSS offers a comprehensive set of utility classes to apply, control, and customize these effects with ease, directly in your HTML.

Core Transition & Animation Utilities

Below are the fundamental utilities for creating transitions and animations in Tailwind CSS. These classes can be combined to achieve a wide variety of effects.

Utility	Description	Modern Practice
Transition Property (transition)	Specifies which CSS properties should be animated during a transition. Use transition-all or target specific properties like transition-colors or transition-transform.	Targeting specific properties is better for performance than using transition-all.
Transition Duration (duration-*)	Controls how long a transition effect takes to complete. For example, duration-300 sets a 300ms duration.	Use consistent durations across your UI for a cohesive feel.
Transition Timing Function (ease-*)	Controls the acceleration curve of the transition, making it feel more natural. Common options include ease-in-out and ease-linear.	ease-in-out often provides a more natural and pleasing effect than ease-linear.
Transition Delay (delay-*)	Adds a pause before the transition begins. Useful for staggering animations in a sequence.	Use delay sparingly to avoid making the UI feel sluggish.
Animation (animate-*)	Applies pre-defined keyframe animations to elements. Includes utilities like animate-spin, animate-ping, and animate-bounce.	Easily extendable with your own custom keyframe animations in tailwind.config.js.
Motion-Safe (motion-safe, motion-reduce)	Applies styles conditionally based on the user’s OS-level preference for reduced motion, improving accessibility.	Always wrap animations in motion-safe to respect user preferences.

Example: Interactive Card with Transitions

This example demonstrates how to combine transition utilities to create a smooth, interactive card component. Notice how we enable transitions with the transition class and then define what changes on hover using hover: variants.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- For demonstration, we use the Tailwind Play CDN. In a real project, you would use a build step. -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-8">

  <div class="group bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg space-y-4">
    <h3 class="text-2xl font-bold text-slate-900 dark:text-white">
      Interactive Card
    </h3>
    <p class="text-slate-600 dark:text-slate-400">
      Hover over the button below to see a combination of transitions.
    </p>
    <button class="
      /* Base styles */
      px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md
      transform

      /* Transition properties */
      transition-all duration-300 ease-in-out

      /* Hover states */
      hover:bg-indigo-700 hover:scale-105 hover:shadow-xl

      /* Focus states for accessibility */
      focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75

      /* Accessibility for motion */
      motion-safe:hover:scale-105 motion-reduce:hover:scale-100"
    >
      Hover Me
    </button>
  </div>

</body>
</html>

Example: Custom Animations

While Tailwind’s built-in animations are useful, real-world projects often require custom effects. You can easily define your own keyframes and animations in your tailwind.config.js file. Here, we’ll demonstrate a loading spinner (animate-spin) and a custom ‘fade-in-up’ animation.

1. Configure tailwind.config.js

First, define the custom keyframes and animation utility.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in-up': {
          '0%': {
            opacity: '0',
            transform: 'translateY(20px)'
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)'
          },
        }
      },
      animation: {
        'fade-in-up': 'fade-in-up 0.5s ease-out'
      }
    },
  },
  plugins: [],
}

2. Apply the Animation in HTML

Now you can use animate-fade-in-up just like any other utility class. This example also includes a standard animate-spin for comparison.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // This script block simulates the custom config for the CDN
    tailwind.config = {
      theme: {
        extend: {
          keyframes: {
            'fade-in-up': {
              '0%': { opacity: '0', transform: 'translateY(20px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            }
          },
          animation: {
            'fade-in-up': 'fade-in-up 0.5s ease-out forwards' // 'forwards' keeps the final state
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-8 space-y-12">

  <!-- Standard Animation Example -->
  <div class="flex items-center space-x-4">
    <svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="text-lg font-medium text-gray-700">Loading...</span>
  </div>

  <!-- Custom Animation Example -->
  <div class="text-center animate-fade-in-up">
    <h2 class="text-3xl font-bold text-gray-800">Hello, Custom Animations!</h2>
    <p class="mt-2 text-gray-600">This element fades in and moves up.</p>
  </div>

</body>
</html>