Animations and Transitions

🧑‍🏫 Sabse pehle — simple mein samjho#

Jab user button pe hover kare, toh color ekdum se jhatke se change na ho, balki smoothly change ho. Isko Transition kehte hain. Tailwind mein ise add karna literally ek word ka kaam hai (transition). Aur agar koi cheez continuous ghum rahi hai ya chamak rahi hai (jaise loading spinner), toh usko Animation kehte hain, jiske liye animate-spin ya animate-pulse use hota hai.

State Transitions#

To make state changes (like hovering or focusing) smooth, you apply the transition class. This automatically applies smooth transitions to colors, background-colors, border-colors, text-decoration-colors, fill, stroke, opacity, box-shadow, transform, and filter.

The Basic Setup#

<!-- Hover over the button to see the smooth transition! -->
<div class="flex justify-center p-8 bg-gray-50 rounded-xl">
  <button class="bg-indigo-600 hover:bg-indigo-800 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:shadow-xl transition-all outline-none">
    Hover Me
  </button>
</div>

Controlling Duration and Easing#

You can fine-tune how the transition occurs:

• Duration: duration-75, duration-150 (default), duration-300, duration-500, duration-1000 (milliseconds).
• Timing Function (Easing):
  • ease-linear (Constant speed)
  • ease-in (Starts slow, ends fast)
  • ease-out (Starts fast, ends slow)
  • ease-in-out (Default - smooth start and end)

<!-- A slower, very smooth transition with transforms -->
<!-- Try changing duration-500 to duration-1000! -->
<div class="flex justify-center p-8 bg-gray-50 rounded-xl">
  <button class="bg-rose-500 hover:bg-rose-700 hover:-translate-y-2 hover:scale-105 text-white font-semibold py-3 px-8 rounded-xl shadow-lg transition-all duration-500 ease-in-out">
    Smooth Transform
  </button>
</div>

Transforms (Scaling and Translating)#

Transforms are closely tied to transitions. In modern Tailwind, you do not need to apply a transform class first; you just apply the transform utilities directly!

• Scale: scale-95, hover:scale-105, active:scale-90
• Translate (Move): translate-x-2, -translate-y-4
• Rotate: rotate-45, rotate-90, -rotate-180

Built-in Animations#

Tailwind provides four highly useful, ready-to-use animations:

1. animate-spin: Essential for loading icons.

   <!-- Built-in animations: spin, ping, pulse, bounce -->
   <div class="flex items-center justify-around p-8 bg-white rounded-xl shadow-sm border border-gray-100">
     <!-- Spin -->
     <div class="flex flex-col items-center gap-2">
       <svg class="animate-spin h-8 w-8 text-blue-500" 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>
       <span class="text-xs text-gray-500">Spin</span>
     </div>
     <!-- Ping -->
     <div class="flex flex-col items-center gap-2">
       <span class="relative flex h-6 w-6">
         <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
         <span class="relative inline-flex rounded-full h-6 w-6 bg-rose-500"></span>
       </span>
       <span class="text-xs text-gray-500">Ping</span>
     </div>
     <!-- Pulse -->
     <div class="flex flex-col items-center gap-2">
       <div class="animate-pulse h-6 w-16 bg-slate-200 rounded"></div>
       <span class="text-xs text-gray-500">Pulse</span>
     </div>
     <!-- Bounce -->
     <div class="flex flex-col items-center gap-2">
       <div class="animate-bounce bg-white p-2 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center">
         <svg class="w-6 h-6 text-violet-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
       </div>
       <span class="text-xs text-gray-500">Bounce</span>
     </div>
   </div>
   

2. animate-ping: Slowly scales up and fades out (like a radar blip, great for notification dots).
3. animate-pulse: Fades in and out (perfect for skeleton loading screens).
4. animate-bounce: Bounces up and down (draws attention to an element, like an arrow pointing down).

Adding Custom Animations (v4)#

If you need a custom keyframe animation, you simply define it in your @theme block using CSS variables!

@import "tailwindcss";

@theme {
  /* Define the keyframes */
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }
}

You can now use animate-wiggle directly in your HTML!