Transitions & Animations في Tailwind

في أي UI حي التحركات الصغيرة (micro-interactions) بتدي إحساس انسيابية وراحة للـ User.
Tailwind بيوفرلك Utilities جاهزة للتحكم في Transitions & Animations من غير ما تكتب CSS معقدة.

Transitions

الـ Transition هو اللي بيحدد:

• إيه اللي هيتغير (property).
• هيتغير إزاي (duration – timing function – delay).

أمثلة عملية:   

🔹 إضافة Transition على Hover

Animations

Tailwind بييجي مع Animations جاهزة + تقدر تضيف Custom في tailwind.config.js.

Animations Built-in:

• animate-spin = دوران (spinner).
• animate-ping = pulse/bounce.
• animate-bounce = ارتداد.
• animate-pulse = تنفس.

🔹 مثال:

لو عاوز Animation مخصص:

📌 tailwind.config.js

📌 استخدام:

• استخدم Transitions عشان تخلي أي تغيير انسيابي (ألوان، حجم، شكل).
• استخدم Animations عشان تحرك عناصر حية (loaders، feedback، emphasis).
• Tailwind بيسهّل عليك كل ده بـ Utilities جاهزة + دعم كامل لـ Custom Animations.