Transitions

Transitions in Tailwind

Transitions create smooth, animated changes between CSS states (like hover). Tailwind provides utilities for transition property, duration, timing function, and delay.

Basic Transition

<button class="bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors duration-200">
  Smooth color change
</button>

Transition Properties

Duration

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

Timing Function (Easing)

<div class="transition-all duration-300 ease-linear">Linear</div>
<div class="transition-all duration-300 ease-in">Ease in (slow start)</div>
<div class="transition-all duration-300 ease-out">Ease out (slow end)</div>
<div class="transition-all duration-300 ease-in-out">Ease in-out</div>

Delay

<div class="transition-all duration-300 delay-100">100ms delay</div>
<div class="transition-all duration-300 delay-300">300ms delay</div>

Transforms

Tailwind includes utilities for CSS transforms — scale, rotate, translate, and skew.

Scale

<div class="hover:scale-105 transition-transform duration-300">
  Scales to 105% on hover
</div>

<div class="hover:scale-110 transition-transform">Scale up 110%</div>
<div class="hover:scale-95 transition-transform">Scale down 95%</div>
<div class="hover:scale-x-110 transition-transform">Scale X only</div>

Rotate

<div class="hover:rotate-6 transition-transform duration-300">Rotate 6°</div>
<div class="hover:rotate-12 transition-transform">Rotate 12°</div>
<div class="hover:rotate-45 transition-transform">Rotate 45°</div>
<div class="hover:rotate-90 transition-transform">Rotate 90°</div>
<div class="hover:rotate-180 transition-transform">Rotate 180°</div>
<div class="hover:-rotate-12 transition-transform">Rotate -12°</div>

Translate

<div class="hover:translate-x-2 transition-transform">Move right 0.5rem</div>
<div class="hover:-translate-y-1 transition-transform">Move up 0.25rem</div>
<div class="hover:translate-x-4 hover:-translate-y-2 transition-transform">Move diagonally</div>

Skew

<div class="hover:skew-x-3 transition-transform">Skew X 3°</div>
<div class="hover:skew-y-6 transition-transform">Skew Y 6°</div>

Built-in Animations

Tailwind includes four ready-made CSS animations:

<!-- Spin (loading indicator) -->
<svg class="animate-spin h-5 w-5 text-indigo-600" viewBox="0 0 24 24">...</svg>

<!-- Ping (notification pulse) -->
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-indigo-500"></span>
</span>

<!-- Pulse (skeleton loading) -->
<div class="animate-pulse bg-gray-200 h-4 w-48 rounded"></div>

<!-- Bounce (attention getter) -->
<div class="animate-bounce text-2xl">⬇</div>

Skeleton Loading

<div class="max-w-sm bg-white rounded-xl shadow p-6">
  <div class="animate-pulse space-y-4">
    <div class="bg-gray-200 h-40 rounded-lg"></div>
    <div class="bg-gray-200 h-4 w-3/4 rounded"></div>
    <div class="bg-gray-200 h-4 w-1/2 rounded"></div>
    <div class="flex space-x-2">
      <div class="bg-gray-200 h-8 w-20 rounded-full"></div>
      <div class="bg-gray-200 h-8 w-20 rounded-full"></div>
    </div>
  </div>
</div>

Practical Example — Animated Card

<div class="group bg-white rounded-2xl shadow-md hover:shadow-2xl p-6 transition-all duration-300 cursor-pointer max-w-sm hover:-translate-y-1">
  <div class="overflow-hidden rounded-xl mb-4">
    <img src="https://picsum.photos/400/200" alt="" class="w-full h-44 object-cover group-hover:scale-110 transition-transform duration-500">
  </div>
  <h3 class="font-bold text-gray-900 group-hover:text-indigo-600 transition-colors">Animated Card</h3>
  <p class="mt-2 text-sm text-gray-500">This card lifts on hover with a smooth transition.</p>
</div>

Recap

• transition-* + duration-* + ease-* create smooth state transitions.
• Transform utilities: scale-*, rotate-*, translate-*, skew-*.
• Built-in animations: animate-spin, animate-ping, animate-pulse, animate-bounce.
• Combine group-hover: with transforms for interactive card effects.

In the final tutorial, we will wrap up the series with best practices and resources.