Skip to main content
Tailwind CSS Mastery·Lesson 5 of 5

Animations & Transitions

Smooth transitions and animations give users visual feedback and make interfaces feel responsive. Tailwind provides utilities for both simple transitions and complex keyframe animations.

Transition Utilities

The transition utility enables CSS transitions on an element. Pair it with a duration and optional easing:

Ctrl+Enter
HTML
CSS
JS
Preview

Transition Property Utilities

UtilityProperties transitioned
transition-noneNone
transition-allAll properties
transition-colorsColor, background-color, border-color, text-decoration-color, fill, stroke
transition-opacityOpacity
transition-shadowBox shadow
transition-transformTransform
transitionColor, background, border, text-decoration, fill, stroke, opacity, box-shadow, transform, filter

Duration & Easing

Ctrl+Enter
HTML
CSS
JS
Preview

Built-In Animations

Tailwind ships with four animations out of the box:

Ctrl+Enter
HTML
CSS
JS
Preview

Custom Keyframe Animations

Define custom animations in your CSS using @theme and standard @keyframes:

Ctrl+Enter
HTML
CSS
JS
Preview

Use them in your markup:

Ctrl+Enter
HTML
CSS
JS
Preview

Transition with JavaScript State

In React, combine Tailwind transitions with state for dynamic UI:

import { useState } from "react";

export function Accordion({ title, children }: { title: string; children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border border-gray-200 rounded-lg">
      <button
        onClick={()=> setIsOpen(!isOpen)}
        className="flex items-center justify-between w-full px-4 py-3 text-left font-medium"
      >
        {title}
        <svg
          className={`w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} ="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div
        className={`overflow-hidden transition-all duration-300 ${
          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
        }`}
      >
        <div className="px-4 pb-4 text-gray-600">{children}</div>
      </div>
    </div>
  );
}

Motion-Safe and Motion-Reduced

Some users have vestibular disorders and prefer reduced motion. Tailwind provides variants to respect this:

Ctrl+Enter
HTML
CSS
JS
Preview

A good practice is to wrap all non-essential animations with motion-safe::

Ctrl+Enter
HTML
CSS
JS
Preview

Practical Example: Animated Notification

Ctrl+Enter
HTML
CSS
JS
Preview