Tailwind CSS Animation Techniques for Modern UIs

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
        'slide-up': 'slideUp 0.6s ease-out',
        'bounce-slow': 'bounce 3s infinite',
        'spin-slow': 'spin 3s linear infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)' },
          '100%': { transform: 'translateY(0)' },
        },
      },
    },
  },
};

<div class="animate-fade-in">Fades in smoothly</div>
<div class="animate-slide-up">Slides up from bottom</div>

<!-- Scale on hover -->
<button class="transition-transform hover:scale-105 active:scale-95">
  Click me
</button>

<!-- Glow effect -->
<div class="transition-shadow hover:shadow-lg hover:shadow-blue-500/50">
  Glowing card
</div>

<!-- Gradient shift -->
<div
  class="bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500 hover:from-purple-500 hover:to-blue-500"
>
  Gradient shift
</div>

<!-- Spinning loader -->
<div
  class="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-500"
></div>

<!-- Pulsing dots -->
<div class="flex space-x-2">
  <div class="h-3 w-3 animate-bounce rounded-full bg-blue-500"></div>
  <div
    class="h-3 w-3 animate-bounce rounded-full bg-blue-500 [animation-delay:0.2s]"
  ></div>
  <div
    class="h-3 w-3 animate-bounce rounded-full bg-blue-500 [animation-delay:0.4s]"
  ></div>
</div>

<div class="animate-pulse space-y-4">
  <div class="h-4 w-3/4 rounded bg-gray-200"></div>
  <div class="h-4 rounded bg-gray-200"></div>
  <div class="h-4 w-5/6 rounded bg-gray-200"></div>
</div>

<!-- Button press effect -->
<button class="transition-all active:translate-y-1 active:shadow-sm">
  Press me
</button>

<!-- Input focus effect -->
<input
  class="border-2 border-gray-300 transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-200"
  type="text"
/>

<!-- Checkbox with animation -->
<input
  type="checkbox"
  class="h-5 w-5 transition-all checked:scale-110 checked:bg-blue-500"
/>

<div class="space-y-2">
  <div class="animate-fade-in [animation-delay:0ms]">Item 1</div>
  <div class="animate-fade-in [animation-delay:100ms]">Item 2</div>
  <div class="animate-fade-in [animation-delay:200ms]">Item 3</div>
  <div class="animate-fade-in [animation-delay:300ms]">Item 4</div>
</div>

<div
  class="opacity-0 transition-opacity duration-500 data-[loaded=true]:opacity-100"
>
  Page content
</div>