الانتقالات والحركات

<button class="bg-blue-500 hover:bg-blue-700
               transition duration-300 ease-in-out">
  انتقال سلس
</button>

<div class="hover:scale-110 transition">يكبر عند المرور</div>
<div class="hover:-translate-y-1 transition">يرتفع قليلًا</div>
<div class="hover:rotate-6 transition">يدور</div>

<div class="animate-spin">⏳</div>      <!-- دوران مستمرّ -->
<div class="animate-pulse">تحميل...</div>  <!-- نبض -->
<div class="animate-bounce">↓</div>      <!-- ارتداد -->

<button class="rounded-lg bg-purple-600 px-5 py-2 text-white
               transition-all duration-200
               hover:-translate-y-0.5 hover:shadow-lg active:scale-95">
  زر تفاعلي
</button>