در مقاله قبل با Stateهای مختلف در Tailwind CSS مانند hover، focus، active و disabled آشنا شدیم. اما تغییرات ایجادشده در این حالت‌ها معمولاً به‌صورت ناگهانی اتفاق می‌افتند. برای مثال ممکن است رنگ یک Button هنگام Hover فوراً تغییر کند یا Shadow یک Card بدون هیچ حرکت نرمی ظاهر شود. Tailwind CSS ابزارهایی در اختیار ما قرار می‌دهد تا این تغییرات را با استفاده از Transition نرم و طبیعی کنیم و در صورت نیاز، با Animation حرکت‌های بیشتری به عناصر اضافه کنیم. در این مقاله ابتدا Transition را یاد می‌گیریم، سپس Duration و Timing Function را بررسی می‌کنیم و در ادامه با Animationهای آماده Tailwind CSS و ساخت چند مثال عملی آشنا خواهیم شد.

Transition چیست؟

Transition یا انتقال، باعث می‌شود تغییر یک ویژگی CSS به‌جای اینکه ناگهانی اتفاق بیفتد، طی مدت زمان مشخصی انجام شود.

برای مثال بدون Transition:

<button class="bg-blue-600 hover:bg-blue-800 text-white px-5 py-3 rounded-lg">
    خرید محصول
</button>

رنگ Button هنگام Hover تقریباً بلافاصله تغییر می‌کند.

اما با:

<button class="bg-blue-600 hover:bg-blue-800 transition text-white px-5 py-3 rounded-lg">
    خرید محصول
</button>

تغییر رنگ نرم‌تر می‌شود.

کلاس transition

ساده‌ترین Utility برای Transition:

transition

است.

مثال:

<div class="bg-white shadow-sm hover:shadow-lg transition">
    Product Card
</div>

هنگام Hover، تغییر Shadow به شکل نرم‌تری اتفاق می‌افتد.

transition-all

اگر بخواهیم تمام ویژگی‌هایی که قابل Transition هستند تحت تأثیر قرار بگیرند، می‌توانیم از:

transition-all

استفاده کنیم.

مثال:

<div
    class="rounded-xl border p-6
           transition-all
           hover:-translate-y-1
           hover:shadow-lg"
>
    Product
</div>

در اینجا چند تغییر هم‌زمان اتفاق می‌افتد.

تفاوت transition و transition-all

به‌صورت ساده:

transition
    ↓
ویژگی‌های معمول قابل Transition

transition-all
    ↓
تمام ویژگی‌های قابل Transition

در پروژه‌های واقعی بهتر است تا حد امکان مشخص کنیم چه ویژگی‌هایی باید Transition داشته باشند، اما برای شروع transition و transition-all هر دو کاربردی هستند.

Duration چیست؟

Duration مشخص می‌کند Transition چه مدت طول بکشد.

مثلاً:

duration-150
duration-300
duration-500
duration-700

برای مثال:

<button
    class="bg-blue-600 hover:bg-blue-800
           transition duration-300
           rounded-lg px-5 py-3 text-white"
>
    خرید
</button>

در اینجا Transition حدود 300 میلی‌ثانیه طول می‌کشد.

مقایسه Durationها

به صورت مفهومی:

duration-150
Fast

duration-300
Normal

duration-500
Slow

duration-700
Slower

برای بسیاری از تعاملات رابط کاربری، Durationهای کوتاه تا متوسط مناسب‌تر هستند.

مثال Button با Transition

<button
    class="rounded-lg bg-blue-600 px-6 py-3
           font-semibold text-white
           transition duration-300
           hover:bg-blue-700"
>
    مشاهده محصولات
</button>

اکنون تغییر رنگ Button ناگهانی نیست.

Transition رنگ

Transition برای رنگ‌ها بسیار کاربردی است.

<a
    href="#"
    class="text-gray-600
           transition-colors duration-200
           hover:text-blue-600"
>
    مشاهده جزئیات
</a>

در اینجا از:

transition-colors

استفاده کرده‌ایم.

این Utility برای Transition ویژگی‌های مرتبط با رنگ کاربرد دارد.

Transition برای Background

<button
    class="rounded-lg bg-gray-800 px-5 py-3 text-white
           transition-colors duration-300
           hover:bg-blue-600"
>
    ادامه
</button>

هنگام Hover، رنگ Background به‌صورت نرم تغییر می‌کند.

Transition برای Shadow

<div
    class="rounded-xl bg-white p-6 shadow-sm
           transition-shadow duration-300
           hover:shadow-xl"
>
    Product Card
</div>

در این مثال فقط Shadow را Transition می‌دهیم.

Transition برای Transform

در مقاله قبل از:

hover:-translate-y-1

استفاده کردیم.

اکنون می‌توانیم آن را نرم کنیم:

<div
    class="rounded-xl border bg-white p-6
           transition-transform duration-300
           hover:-translate-y-1"
>
    Product Card
</div>

نتیجه:

Normal
   ↓
Hover
   ↓
Move Up

و حرکت به‌صورت نرم انجام می‌شود.

ترکیب چند Transition

می‌توانیم چند ویژگی را هم‌زمان تغییر دهیم:

<div
    class="group rounded-xl border bg-white p-6 shadow-sm
           transition-all duration-300
           hover:-translate-y-1
           hover:border-blue-400
           hover:shadow-lg"
>

    <h3 class="font-bold transition-colors duration-300 group-hover:text-blue-600">
        Product Title
    </h3>

    <p class="mt-2 text-gray-600">
        Product description.
    </p>

</div>

هنگام Hover:

• Card کمی بالا می‌رود.

• Border تغییر می‌کند.

• Shadow تغییر می‌کند.

• رنگ عنوان تغییر می‌کند.

همه این تغییرات نرم هستند.

Ease چیست؟

Timing Function مشخص می‌کند سرعت تغییر در طول Transition چگونه باشد.

یکی از گزینه‌های رایج:

ease-linear
ease-in
ease-out
ease-in-out

است.

مثال:

<div
    class="transition duration-500 ease-in-out hover:scale-105"
>
    Card
</div>

ease-linear

سرعت تغییر تقریباً ثابت است.

<div class="transition duration-500 ease-linear hover:scale-105">
    Element
</div>

ease-in

حرکت با سرعت کمتر شروع می‌شود و سپس سریع‌تر می‌شود.

<div class="transition duration-500 ease-in hover:scale-105">
    Element
</div>

ease-out

حرکت سریع‌تر شروع شده و در پایان آرام‌تر می‌شود.

<div class="transition duration-500 ease-out hover:scale-105">
    Element
</div>

ease-in-out

شروع و پایان حرکت نرم‌تر است.

<div class="transition duration-500 ease-in-out hover:scale-105">
    Element
</div>

برای بسیاری از UIهای معمول، ease-out یا ease-in-out انتخاب‌های مناسبی هستند.

Delay چیست؟

می‌توانیم شروع Transition را نیز با Delay به تأخیر بیندازیم.

برای مثال:

<div
    class="transition duration-300 delay-100 hover:scale-105"
>
    Card
</div>

در این مثال قبل از شروع Transition یک تأخیر کوتاه وجود دارد.

Scale

یکی از کاربردهای رایج Transition، بزرگ یا کوچک کردن عنصر است.

<div class="transition hover:scale-105">
    Product
</div>

یعنی هنگام Hover، اندازه عنصر کمی افزایش پیدا می‌کند.

مثال کامل‌تر:

<div
    class="rounded-xl border bg-white p-6
           transition duration-300
           hover:scale-105"
>
    Product Card
</div>

برای Cardهای واقعی بهتر است مقدار Scale زیاد نباشد تا Layout صفحه دچار مشکل نشود.

Rotate

می‌توان عنصر را نیز چرخاند.

<div class="transition duration-300 hover:rotate-3">
    ⭐
</div>

این روش برای Iconها یا عناصر تزئینی می‌تواند کاربرد داشته باشد.

Translate

برای جابه‌جایی عنصر می‌توان از Translate استفاده کرد.

مثال حرکت به سمت بالا:

<div class="transition-transform duration-300 hover:-translate-y-2">
    Card
</div>

حرکت به سمت راست:

<div class="transition-transform duration-300 hover:translate-x-2">
    Element
</div>

ساخت Card حرفه‌ای‌تر

حالا مفاهیم قبلی را ترکیب کنیم:

<div
    class="group overflow-hidden rounded-2xl border bg-white shadow-sm
           transition-all duration-300 ease-out
           hover:-translate-y-2
           hover:shadow-xl"
>

    <img
        src="product.jpg"
        alt="Product"
        class="h-56 w-full object-cover
               transition-transform duration-500
               group-hover:scale-105"
    >

    <div class="p-5">

        <h3
            class="text-lg font-bold
                   transition-colors duration-300
                   group-hover:text-blue-600"
        >
            Modern Product
        </h3>

        <p class="mt-2 text-gray-600">
            A modern product description.
        </p>

        <button
            class="mt-5 rounded-lg bg-blue-600 px-5 py-2 text-white
                   transition-colors duration-300
                   hover:bg-blue-700"
        >
            خرید
        </button>

    </div>

</div>

در این مثال:

Card
 ↓
Hover
 ├── Card moves up
 ├── Shadow changes
 ├── Image scales
 ├── Title changes color
 └── Button changes color

این الگو در بسیاری از سایت‌های فروشگاهی استفاده می‌شود.

Animation چیست؟

Transition زمانی مفید است که یک عنصر از یک State به State دیگر تغییر کند.

اما Animation می‌تواند یک حرکت مستقل ایجاد کند.

برای مثال:

Element
 ↓
Move
 ↓
Move
 ↓
Move
 ↓
Repeat

Animation می‌تواند بدون نیاز به Hover نیز اجرا شود.

Animationهای آماده Tailwind CSS

Tailwind CSS چند Utility آماده برای Animation دارد.

از جمله:

animate-spin
animate-ping
animate-pulse
animate-bounce

این Utilityها برای موارد مختلفی کاربرد دارند.

animate-spin

عنصر را به شکل چرخشی حرکت می‌دهد.

مثال:

<div class="animate-spin">
    🔄
</div>

کاربرد رایج آن برای Loading Indicator است.

ساخت Loading Spinner

مثال:

<div
    class="h-8 w-8 animate-spin rounded-full
           border-4 border-gray-200 border-t-blue-600"
>
</div>

در اینجا یک Spinner ساده ایجاد کرده‌ایم.

ساختار آن:

Circle
   +
Border
   +
animate-spin
   =
Loading Spinner

animate-pulse

باعث ایجاد حالت Pulse می‌شود.

<div class="h-4 w-32 animate-pulse rounded bg-gray-200"></div>

این تکنیک برای Skeleton Loading بسیار کاربردی است.

مثال:

<div class="space-y-4">

    <div class="h-6 w-1/2 animate-pulse rounded bg-gray-200"></div>

    <div class="h-4 w-full animate-pulse rounded bg-gray-200"></div>

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

</div>

می‌توانیم از این روش زمانی استفاده کنیم که اطلاعات واقعی هنوز از Server دریافت نشده‌اند.

animate-bounce

باعث حرکت Bounce می‌شود.

<div class="animate-bounce">
    ↓
</div>

این روش می‌تواند برای نمایش یک فلش یا عنصر راهنما استفاده شود.

animate-ping

یک افکت Ping ایجاد می‌کند.

<div class="relative">

    <span class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-green-400"></span>

    <span class="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>

</div>

این الگو می‌تواند برای نمایش وضعیت Online یا Notification Indicator استفاده شود.

ساخت Notification Indicator

<div class="relative">

    <button class="rounded-lg border px-4 py-2">
        Notifications
    </button>

    <span
        class="absolute -right-1 -top-1 flex h-3 w-3"
    >
        <span
            class="absolute inline-flex h-full w-full
                   animate-ping rounded-full bg-red-400"
        ></span>

        <span
            class="relative inline-flex h-3 w-3
                   rounded-full bg-red-500"
        ></span>
    </span>

</div>

با این روش می‌توان یک Indicator متحرک ایجاد کرد.

Transition یا Animation؟

یکی از سوالات مهم این است که چه زمانی از هرکدام استفاده کنیم.

Transition

زمانی مناسب است که تغییر به دلیل تعامل کاربر اتفاق می‌افتد.

مثلاً:

Hover
Focus
Active

Animation

زمانی مناسب است که حرکت مستقل یا تکرارشونده نیاز داریم.

مثلاً:

Loading
Pulse
Bounce
Notification

به صورت ساده:

User Interaction
       ↓
   Transition

Independent Motion
       ↓
    Animation

ترکیب Responsive و Transition

Transition را می‌توان با Responsive Design نیز ترکیب کرد.

مثلاً:

<div
    class="w-full transition-all duration-300
           hover:shadow-lg
           md:w-1/2
           lg:w-1/3"
>
    Card
</div>

در اینجا:

Responsive
    +
Hover
    +
Transition

با هم استفاده شده‌اند.

ترکیب Dark Mode و Transition

در آینده با Dark Mode بیشتر کار خواهیم کرد، اما می‌توانیم Transition را با آن نیز ترکیب کنیم.

مثال:

<div
    class="bg-white text-gray-900
           transition-colors duration-300
           dark:bg-gray-900 dark:text-white"
>
    Content
</div>

وقتی Theme تغییر کند، رنگ‌ها می‌توانند به‌صورت نرم تغییر کنند.

Accessibility و Animation

Animation همیشه نباید بدون توجه به شرایط کاربر اجرا شود.

برخی کاربران ترجیح می‌دهند حرکت‌های متحرک در رابط کاربری کاهش پیدا کند.

در طراحی حرفه‌ای باید به این موضوع نیز توجه شود و در صورت نیاز Animationهای غیرضروری را کاهش دهیم.

در Tailwind CSS می‌توان از Variant مربوط به motion-reduce برای چنین شرایطی استفاده کرد.

مثال:

<div
    class="animate-bounce motion-reduce:animate-none"
>
    ↓
</div>

یعنی در شرایطی که کاربر ترجیح داده حرکت‌ها کاهش پیدا کنند، Animation غیرفعال می‌شود.

Animation باید به تجربه کاربر کمک کند، نه اینکه صرفاً برای تزئین صفحه استفاده شود.

یک مثال عملی — Button تعاملی

<button
    class="rounded-xl bg-blue-600 px-6 py-3
           font-semibold text-white
           shadow-sm
           transition-all duration-300 ease-out
           hover:-translate-y-0.5
           hover:bg-blue-700
           hover:shadow-lg
           active:translate-y-0"
>
    شروع کنید
</button>

رفتار Button:

Normal
   ↓
Hover
Move + Shadow + Color
   ↓
Active
Return

یک مثال عملی — Loading

<div class="flex items-center gap-3">

    <div
        class="h-6 w-6 animate-spin rounded-full
               border-4 border-gray-200 border-t-blue-600"
    ></div>

    <span>
        Loading...
    </span>

</div>

یک مثال عملی — Skeleton

<div class="mx-auto max-w-md rounded-xl border p-5">

    <div class="h-48 animate-pulse rounded-lg bg-gray-200"></div>

    <div class="mt-5 h-6 w-2/3 animate-pulse rounded bg-gray-200"></div>

    <div class="mt-3 h-4 w-full animate-pulse rounded bg-gray-200"></div>

    <div class="mt-2 h-4 w-5/6 animate-pulse rounded bg-gray-200"></div>

</div>

این روش برای زمانی مناسب است که صفحه منتظر دریافت اطلاعات است.

اشتباهات رایج

۱. Animation بیش از حد

اگر همه عناصر صفحه Animation داشته باشند، رابط کاربری شلوغ و خسته‌کننده می‌شود.

۲. Duration بسیار زیاد

برای تعاملات معمول، Transition بسیار طولانی ممکن است حس کندی ایجاد کند.

۳. استفاده از Animation بدون هدف

قبل از اضافه کردن Animation از خودتان بپرسید:

آیا این حرکت به درک بهتر رابط کاربری کمک می‌کند؟

اگر پاسخ منفی است، احتمالاً نیازی به آن ندارید.

۴. فراموش کردن Focus

نباید Transition و Animation باعث شوند Focus کاربر غیرقابل تشخیص شود.

۵. نادیده گرفتن Reduced Motion

برای رابط‌های حرفه‌ای بهتر است شرایط کاربرانی که حرکت کمتر را ترجیح می‌دهند نیز در نظر گرفته شود.

تمرین عملی

یک Product Card ایجاد کنید که ویژگی‌های زیر را داشته باشد:

Card

در حالت عادی:

Border
Shadow
White Background

در Hover:

Move Up
Larger Shadow

Image

در Hover شدن Card:

Slight Scale

Title

در Hover شدن Card:

Color Change

Button

در حالت عادی:

Blue

در Hover:

Darker Blue

و تمام تغییرات با Transition نرم انجام شوند.

سپس یک Loading Spinner و یک Skeleton Loading نیز ایجاد کنید.

جمع‌بندی

در این مقاله یاد گرفتیم چگونه رابط کاربری را با Transition و Animation تعاملی‌تر کنیم.

مهم‌ترین Utilityهایی که بررسی کردیم:

transition
transition-all
transition-colors
transition-shadow
transition-transform
duration-*
ease-*
delay-*
animate-spin
animate-ping
animate-pulse
animate-bounce
motion-reduce

همچنین تفاوت اصلی Transition و Animation را یاد گرفتیم:

Transition
برای تغییر بین Stateها

Animation
برای حرکت مستقل یا تکرارشونده

با ترکیب این قابلیت‌ها می‌توانیم Buttonها، Cardها، Loading Indicatorها، Skeletonها و بخش‌های مختلف سایت را حرفه‌ای‌تر طراحی کنیم.