Tailwind CSS Animations and Transitions

Transition Properties

<!-- Basic transition (all properties) -->
<button class="transition bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

<!-- Transition specific properties -->
<button class="transition-colors bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Color transition only
</button>

<!-- Available transition properties -->
<!-- transition-none, transition-all, transition, transition-colors, transition-opacity, transition-shadow, transition-transform -->

Transition Duration

<!-- Different durations -->
<div class="duration-150 ...">Fast transition (150ms)</div>
<div class="duration-300 ...">Normal transition (300ms)</div>
<div class="duration-700 ...">Slow transition (700ms)</div>

<!-- Available durations -->
<!-- duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000 -->

Transition Timing

<!-- Different timing functions -->
<div class="ease-linear ...">Linear</div>
<div class="ease-in ...">Ease-in</div>
<div class="ease-out ...">Ease-out</div>
<div class="ease-in-out ...">Ease-in-out</div>

Transition Delay

<!-- Different delays -->
<div class="delay-150 ...">Short delay (150ms)</div>
<div class="delay-300 ...">Medium delay (300ms)</div>
<div class="delay-700 ...">Long delay (700ms)</div>

<!-- Available delays -->
<!-- delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, delay-1000 -->

Complete Transition Example

<!-- Button with complete transition configuration -->
<button class="transition-all duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-600 bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

Hover over the blue box to see the transition effect.

Scale Transforms

<!-- Scale on hover -->
<div class="transform hover:scale-110 ...">Hover to scale up</div>
<div class="transform hover:scale-90 ...">Hover to scale down</div>

<!-- Scale individual axes -->
<div class="transform hover:scale-x-110 ...">Scale horizontally</div>
<div class="transform hover:scale-y-110 ...">Scale vertically</div>

Rotate Transforms

<!-- Rotate on hover -->
<div class="transform hover:rotate-45 ...">Rotate 45 degrees</div>
<div class="transform hover:-rotate-45 ...">Rotate -45 degrees</div>

Translate Transforms

<!-- Move on hover -->
<div class="transform hover:translate-x-4 ...">Move right</div>
<div class="transform hover:-translate-y-4 ...">Move up</div>

Skew Transforms

<!-- Skew on hover -->
<div class="transform hover:skew-x-12 ...">Skew horizontally</div>
<div class="transform hover:skew-y-12 ...">Skew vertically</div>

Transform Origin

<!-- Change the origin of the transformation -->
<div class="transform origin-center hover:rotate-45 ...">Origin center</div>
<div class="transform origin-top-left hover:rotate-45 ...">Origin top left</div>
<div class="transform origin-bottom-right hover:rotate-45 ...">Origin bottom right</div>

Built-in Animations

<!-- Spin animation -->
<div class="animate-spin h-10 w-10 bg-blue-500"></div>

<!-- Ping animation (ripple effect) -->
<div class="animate-ping h-10 w-10 bg-blue-500"></div>

<!-- Pulse animation (fading) -->
<div class="animate-pulse h-10 w-10 bg-blue-500"></div>

<!-- Bounce animation -->
<div class="animate-bounce h-10 w-10 bg-blue-500"></div>

Adding Custom Animations

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        fadeIn: 'fadeIn 1s ease-in',
      },
    },
  },
}

Then use your custom animations in your HTML:

<div class="animate-wiggle">This element wiggles</div>
<div class="animate-fadeIn">This element fades in</div>

Hover Card Effect

<!-- Hover card with shadow and scale effect -->
<div class="transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 hover:shadow-lg bg-white rounded-lg p-6">
  <h3 class="text-lg font-bold mb-2">Hover Card</h3>
  <p>This card lifts up slightly and scales on hover.</p>
</div>

Loading Spinner

<!-- Loading spinner with Tailwind -->
<div class="flex justify-center items-center">
  <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>

Button with Loading State

<!-- Button with loading state -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center">
  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
  Processing...
</button>

Animated Mobile Menu

<!-- Hamburger menu with animation -->
<button class="focus:outline-none">
  <div class="w-6 h-0.5 bg-gray-800 mb-1.5 transition-all duration-300 ease-in-out transform origin-left"></div>
  <div class="w-6 h-0.5 bg-gray-800 mb-1.5 transition-all duration-300 ease-in-out"></div>
  <div class="w-6 h-0.5 bg-gray-800 transition-all duration-300 ease-in-out transform origin-left"></div>
</button>

<!-- When menu is open, add these classes -->
<!-- First bar: rotate-45 -->
<!-- Second bar: opacity-0 -->
<!-- Third bar: -rotate-45 -->

Fade-in Elements on Page Load

<!-- Elements that fade in on page load -->
<div class="opacity-0 transition-opacity duration-1000 ease-in">
  This element will fade in when the 'opacity-100' class is added via JavaScript
</div>

<script>
  // Add this with JavaScript after page load
  document.addEventListener('DOMContentLoaded', () => {
    const fadeElements = document.querySelectorAll('.opacity-0');
    setTimeout(() => {
      fadeElements.forEach(el => el.classList.add('opacity-100'));
    }, 100);
  });
</script>

• Use hardware-accelerated properties: Stick to transform and opacity for the smoothest animations
• Add will-change for complex animations: Use will-change-transform or will-change-opacity for smoother performance
• Use @media (prefers-reduced-motion): Respect user preferences for reduced motion
• Avoid animating too many elements: Limit animations to important interactive elements

Respecting Reduced Motion Preferences

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        // Define reduced versions of your animations
        'spin-reduced': 'spin 3s linear infinite',
        'bounce-reduced': 'none',
      },
    },
  },
  variants: {
    extend: {
      animation: ['motion-safe', 'motion-reduce'],
    },
  },
}

Then in your HTML:

<div class="motion-safe:animate-bounce motion-reduce:animate-bounce-reduced">
  This will bounce normally, but respect reduced motion preferences
</div>