EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Transitions & Animations: transition Properties and animate Presets

Transition Properties (transition-*)

Transition classes control smooth animation effects when element states change.

Class CSS Value Description
transition transition-property: color, background-color, border-color, ... Common property transitions
transition-all transition-property: all All property transitions
transition-colors transition-property: color, background-color, border-color, ... Color-only transitions
transition-opacity transition-property: opacity Opacity-only transitions
transition-shadow transition-property: box-shadow Shadow-only transitions
transition-transform transition-property: transform Transform-only transitions
transition-none transition-property: none No transition

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Properties Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- transition-colors color transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-colors Color Transitions</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
          Color transition
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-700 hover:text-yellow-200 transition-colors duration-300">
          Background + text transition
        </button>
        <button class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-lg hover:border-purple-700 hover:text-purple-700 transition-colors duration-300">
          Border transition
        </button>
      </div>
    </div>

    <!-- transition-opacity opacity transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-opacity Opacity Transitions</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-blue-500 rounded-lg hover:opacity-50 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover to half-transparent
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg opacity-50 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover to fully opaque
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg hover:opacity-0 transition-opacity duration-500 flex items-center justify-center text-white text-xs">
          Hover to fade out
        </div>
      </div>
    </div>

    <!-- transition-shadow shadow transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-shadow Shadow Transitions</h3>
      <div class="flex gap-4">
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-lg transition-shadow duration-300 flex items-center justify-center text-sm">
          Small shadow
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-center text-sm">
          Large shadow
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-2xl hover:shadow-blue-500/50 transition-shadow duration-300 flex items-center justify-center text-sm">
          Colored shadow
        </div>
      </div>
    </div>

    <!-- transition-transform transform transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-transform Transform Transitions</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Scale up
        </div>
        <div class="w-24 h-24 bg-red-500 rounded-lg hover:rotate-12 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Rotate
        </div>
        <div class="w-24 h-24 bg-teal-500 rounded-lg hover:-translate-y-2 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Move up
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing transition: color 0.3s ease, background-color 0.3s ease and similar properties, while Tailwind uses class names like transition-colors duration-300 for direct declaration.

💡 Tip: The transition class transitions common properties by default, including color, background-color, border-color, opacity, box-shadow, and transform.

Transition Duration (duration-*)

duration-* classes control the duration of transition animations.

Class CSS Value Description
duration-75 transition-duration: 75ms Extremely fast
duration-100 transition-duration: 100ms Very fast
duration-150 transition-duration: 150ms Fast
duration-200 transition-duration: 200ms Fairly fast
duration-300 transition-duration: 300ms Normal (default)
duration-500 transition-duration: 500ms Fairly slow
duration-700 transition-duration: 700ms Slow
duration-1000 transition-duration: 1000ms Very slow

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Duration Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparing Different Transition Durations</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-75</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-75"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-150</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-150"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-300</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-300"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-500</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-orange-500 rounded-lg hover:w-full transition-all duration-500"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-1000</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-red-500 rounded-lg hover:w-full transition-all duration-1000"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Hover over the color blocks to see different transition durations</p>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself
💡 Tip: Interactive elements (buttons, links) typically use duration-150 or duration-200, while larger animations use duration-300 or duration-500.

Easing Functions (ease-*)

ease-* classes control the acceleration curve of transition animations.

Class CSS Value Description
ease-linear transition-timing-function: linear Constant speed
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1) Slow start
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1) Slow end
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) Slow start and end

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easing Functions Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparing Different Easing Functions</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-linear</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-1000 ease-linear"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-1000 ease-in"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-1000 ease-out"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-purple-500 rounded-lg hover:w-full transition-all duration-1000 ease-in-out"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Hover over the color blocks to see different easing effects</p>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), while Tailwind uses the ease-in-out class name for direct declaration.

Transition Delay (delay-*)

delay-* classes control the delay before a transition animation starts.

Class CSS Value Description
delay-0 transition-delay: 0ms No delay
delay-75 transition-delay: 75ms 75ms delay
delay-100 transition-delay: 100ms 100ms delay
delay-150 transition-delay: 150ms 150ms delay
delay-300 transition-delay: 300ms 300ms delay
delay-500 transition-delay: 500ms 500ms delay
delay-700 transition-delay: 700ms 700ms delay
delay-1000 transition-delay: 1000ms 1000ms delay

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Delay Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Staggered Animation Effect (using delay)</h3>
      <div class="flex gap-4 justify-center">
        <div class="w-16 h-16 bg-blue-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-0"></div>
        <div class="w-16 h-16 bg-green-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-75"></div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-150"></div>
        <div class="w-16 h-16 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-300"></div>
        <div class="w-16 h-16 bg-red-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-500"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4 text-center">Hover to see the staggered animation effect</p>
    </div>

    <!-- Staggered entrance animation -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">Staggered Entrance Animation</h3>
      <div class="space-y-3">
        <div class="p-4 bg-blue-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0s_forwards]">
          Item 1 (0ms delay)
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          Item 2 (100ms delay)
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          Item 3 (200ms delay)
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          Item 4 (300ms delay)
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself
💡 Tip: Use delay-* with different delay values to create staggered animation effects, making multiple elements appear one after another.

Preset Animations (animate-*)

Tailwind provides 4 preset animation classes.

Class CSS Value Description
animate-spin Rotation animation Suitable for loading icons
animate-ping Ping animation Suitable for notification pulses
animate-pulse Pulse animation Suitable for skeleton screens
animate-bounce Bounce animation Suitable for arrow indicators

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preset Animations Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- animate-spin rotation -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-spin Rotation Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div class="w-12 h-12 border-4 border-green-500 border-t-transparent border-r-transparent rounded-full animate-spin"></div>
        <svg class="w-12 h-12 text-purple-500 animate-spin" 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 12h4z"></path>
        </svg>
      </div>
    </div>

    <!-- animate-ping ping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-ping Ping Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="relative">
          <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
          <div class="absolute inset-0 w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
        </div>
        <div class="relative">
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="absolute inset-0 w-8 h-8 bg-green-500 rounded-full animate-ping opacity-75"></div>
        </div>
        <button class="relative px-6 py-3 bg-red-500 text-white rounded-lg">
          Notification
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping"></span>
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></span>
        </button>
      </div>
    </div>

    <!-- animate-pulse pulse -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-pulse Pulse Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="w-16 h-16 bg-blue-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-green-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-purple-200 rounded-lg animate-pulse"></div>
      </div>
      <!-- Skeleton screen example -->
      <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
            <div class="h-3 bg-gray-200 rounded animate-pulse w-1/2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- animate-bounce bounce -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-bounce Bounce Animation</h3>
      <div class="flex gap-8 items-center justify-center">
        <svg class="w-8 h-8 text-blue-500 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
        <div class="w-8 h-8 bg-green-500 rounded-full animate-bounce"></div>
        <div class="w-8 h-8 bg-orange-500 rounded-lg animate-bounce"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing @keyframes and animation properties, while Tailwind uses class names like animate-spin and animate-pulse to apply preset animations directly.

💡 Tip: animate-ping is typically used with absolute positioning to create pulsing notification effects. animate-pulse is great for skeleton screen loading effects.

Custom Keyframes

You can define custom animations using Tailwind configuration or the @theme directive.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Keyframes Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in: fadeIn 0.5s ease-out;
      --animate-fade-in-up: fadeInUp 0.5s ease-out;
      --animate-slide-in-left: slideInLeft 0.5s ease-out;
      --animate-scale-in: scaleIn 0.3s ease-out;
      --animate-shake: shake 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

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

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Custom animations -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Custom Animations</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-blue-50 rounded-lg text-center animate-fade-in">
          <div class="text-2xl mb-2">fadeIn</div>
          <div class="text-sm text-gray-600">Fade in</div>
        </div>
        <div class="p-4 bg-green-50 rounded-lg text-center animate-fade-in-up">
          <div class="text-2xl mb-2">fadeInUp</div>
          <div class="text-sm text-gray-600">Slide up fade in</div>
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg text-center animate-slide-in-left">
          <div class="text-2xl mb-2">slideInLeft</div>
          <div class="text-sm text-gray-600">Slide in from left</div>
        </div>
        <div class="p-4 bg-purple-50 rounded-lg text-center animate-scale-in">
          <div class="text-2xl mb-2">scaleIn</div>
          <div class="text-sm text-gray-600">Scale in</div>
        </div>
      </div>
    </div>

    <!-- shake animation -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">shake Animation</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="Input field"
               class="flex-1 p-3 border border-red-300 rounded-lg animate-shake focus:outline-none focus:border-red-500">
        <button class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
          Submit
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">Use the shake animation to indicate input errors</p>
    </div>

    <!-- Animation control -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animation Control</h3>
      <div class="flex gap-4 flex-wrap">
        <div class="w-16 h-16 bg-blue-500 rounded-lg animate-spin [animation-play-state:paused] hover:[animation-play-state:running] flex items-center justify-center text-white text-xs cursor-pointer">
          Hover to play
        </div>
        <div class="w-16 h-16 bg-green-500 rounded-lg animate-bounce [animation-iteration-count:3] flex items-center justify-center text-white text-xs">
          Bounce 3 times
        </div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse [animation-direction:alternate] flex items-center justify-center text-white text-xs">
          Alternate direction
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires defining @keyframes in a CSS file and writing animation properties, while Tailwind v4's @theme directive lets you define animation variables directly, used with animate-* classes.

⚠️ Note: In Tailwind CDN mode, the @theme directive must be placed inside a <style type="text/tailwindcss"> tag to work.

Comprehensive Example

Combining transitions and animations to create a complete interactive effect example.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions & Animations Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in-up: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Interactive cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=20" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Hover Effect Card</h4>
          <p class="text-gray-600 text-sm">Image zoom, overlay reveal, text slide-in</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=21" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:rotate-3">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Rotation Effect Card</h4>
          <p class="text-gray-600 text-sm">Image rotation, overlay reveal, text slide-in</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=22" alt="Card"
               class="w-full h-full object-cover transition-all duration-500 group-hover:brightness-125">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Brightness Effect Card</h4>
          <p class="text-gray-600 text-sm">Brightness enhancement, overlay reveal, text slide-in</p>
        </div>
      </div>
    </div>

    <!-- Loading states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Loading State Animations</h3>
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <span class="text-sm text-gray-600">Loading</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
          </div>
          <span class="text-sm text-gray-600">Bouncing loading</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.15s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.3s;"></div>
          </div>
          <span class="text-sm text-gray-600">Pulse loading</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

❓ FAQ

Q What's the difference between transition and transition-all?
A transition transitions common properties (colors, backgrounds, borders, shadows, transforms, etc.), while transition-all transitions all animatable properties. transition is generally recommended for better performance.
Q How do I make an animation play only once?
A Use [animation-iteration-count:1] or set animation-fill-mode: forwards when defining the animation in @theme to preserve the final state.
Q What if my transition animation isn't working?
A Check that you've added a transition class, confirm the property is transitionable (display is not), and make sure duration isn't 0.
Q How do I create staggered animations?
A Use delay-* classes with different delay values for multiple elements. For example, 5 elements can use delay-0, delay-75, delay-150, delay-300, and delay-500 respectively.

📖 Summary

📝 Exercises

  1. ⭐ Create a button component that uses transition-colors duration-200 for smooth background and text color transitions on hover

  2. ⭐⭐ Create a loading indicator that uses animate-spin for a rotating circle combined with animate-pulse for a pulsing effect

  3. ⭐⭐⭐ Create an image gallery that uses transition-all duration-300 and group-hover: to achieve a combined animation effect of image zoom, overlay reveal, and title slide-in on hover

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏