06 — Animation & Transitions

<!-- Basic transition -->
<button class="bg-blue-500 text-white px-4 py-2 rounded transition-colors duration-200 hover:bg-blue-600">
  Hover me
</button>
 
<!-- Multiple properties -->
<div class="transition-all duration-300 ease-in-out hover:scale-105">
  Grows and changes opacity
</div>

<!-- Specific properties -->
<div class="transition-colors duration-200">           <!-- Colors only -->
<div class="transition-opacity duration-300">          <!-- Opacity only -->
<div class="transition-transform duration-200">        <!-- Transform only -->
<div class="transition-all duration-300">              <!-- All properties -->
 
<!-- No transition -->
<div class="transition-none">

<div class="duration-75">      <!-- 75ms -->
<div class="duration-100">     <!-- 100ms -->
<div class="duration-150">     <!-- 150ms -->
<div class="duration-200">     <!-- 200ms -->
<div class="duration-300">     <!-- 300ms -->
<div class="duration-500">     <!-- 500ms -->
<div class="duration-700">     <!-- 700ms -->
<div class="duration-1000">    <!-- 1000ms -->

<div class="ease-linear">      <!-- Constant speed -->
<div class="ease-in">          <!-- Slow start -->
<div class="ease-out">         <!-- Slow end -->
<div class="ease-in-out">      <!-- Slow start and end -->

<div class="delay-75">         <!-- 75ms delay -->
<div class="delay-100">        <!-- 100ms delay -->
<div class="delay-300">        <!-- 300ms delay -->
<div class="delay-500">        <!-- 500ms delay -->
<div class="delay-700">        <!-- 700ms delay -->
<div class="delay-1000">       <!-- 1000ms delay -->

<div class="hover:scale-105">     <!-- 105% size -->
<div class="hover:scale-110">     <!-- 110% size -->
<div class="hover:scale-90">      <!-- 90% size -->
<div class="hover:scale-50">      <!-- 50% size -->
<div class="hover:scale-0">       <!-- Invisible -->
 
<!-- Scale X/Y separately -->
<div class="hover:scale-x-110">   <!-- Wider -->
<div class="hover:scale-y-90">    <!-- Shorter -->

<div class="rotate-45">            <!-- 45 degrees -->
<div class="rotate-90">            <!-- 90 degrees -->
<div class="rotate-180">           <!-- 180 degrees -->
<div class="hover:rotate-180">    <!-- Rotate on hover -->
 
<!-- Spin animation -->
<div class="animate-spin">
  <svg class="w-6 h-6">...</svg>
</div>

<!-- Move element -->
<div class="translate-x-4">        <!-- Right 1rem -->
<div class="-translate-x-4">       <!-- Left 1rem -->
<div class="translate-y-4">        <!-- Down 1rem -->
<div class="-translate-y-4">       <!-- Up 1rem -->
 
<!-- Combine -->
<div class="hover:translate-x-2 hover:translate-y-2">
  Moves diagonally on hover
</div>

<div class="skew-x-12">            <!-- Skew X axis -->
<div class="skew-y-12">            <!-- Skew Y axis -->
<div class="hover:skew-x-6">       <!-- Skew on hover -->

<div class="origin-center">        <!-- Center (default) -->
<div class="origin-top-left">      <!-- Top left -->
<div class="origin-top-right">     <!-- Top right -->
<div class="origin-bottom-left">   <!-- Bottom left -->
<div class="origin-bottom-right">  <!-- Bottom right -->

<!-- Spin -->
<div class="animate-spin">
  <svg class="w-6 h-6">...</svg>
</div>
 
<!-- Ping (pulse ring) -->
<div class="relative">
  <div class="absolute -top-1 -right-1 flex h-3 w-3">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
  </div>
</div>
 
<!-- Pulse (breathing) -->
<div class="animate-pulse">
  <div class="h-4 bg-slate-200 rounded w-32"></div>
</div>
 
<!-- Bounce -->
<div class="animate-bounce">
  ↓
</div>

/* In your CSS file */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
 
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<!-- Use custom animations -->
<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  Wiggling text
</div>
 
<div class="animate-[fade-in-up_0.5s_ease-out]">
  Fades in and moves up
</div>

<button class="px-6 py-2 bg-blue-500 text-white rounded-lg transition-all duration-200 hover:bg-blue-600 hover:scale-105 hover:shadow-lg">
  Click Me
</button>

<div class="bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
  <div class="p-6">
    <h3 class="font-semibold">Card Title</h3>
  </div>
</div>

<div class="animate-[fade-in-up_0.6s_ease-out_forwards] opacity-0">
  Content fades in and slides up
</div>

<ul>
  <li class="opacity-0 animate-[fade-in-up_0.5s_ease-out_forwards]">Item 1</li>
  <li class="opacity-0 animate-[fade-in-up_0.5s_ease-out_0.1s_forwards]">Item 2</li>
  <li class="opacity-0 animate-[fade-in-up_0.5s_ease-out_0.2s_forwards]">Item 3</li>
</ul>

<div class="animate-pulse space-y-4">
  <div class="h-4 bg-slate-200 rounded w-3/4"></div>
  <div class="h-4 bg-slate-200 rounded w-1/2"></div>
  <div class="h-4 bg-slate-200 rounded w-full"></div>
</div>

<div class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg animate-[slide-in-left_0.3s_ease-out]">
  Success! Item saved.
</div>

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white rounded-lg p-6 animate-[fade-in-up_0.3s_ease-out]">
    Modal content
  </div>
</div>

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

<!-- Tailwind respects prefers-reduced-motion by default -->
<div class="animate-spin">
  <!-- Won't spin if user prefers reduced motion -->
</div>