فصل 14 از 27 درس 1 از 2

Transform، Transition و Animation

Transition و Transform

بخشی از آموزش جامع Tailwind CSS

محتوای درس Transition و Transform

Transition و Transform را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Transition تغییر بین دو State را نرم می‌کند و Transform موقعیت یا اندازه را بدون تغییر جریان Layout عوض می‌کند. Animation مداوم باید هدف مشخص داشته باشد و ترجیح Reduced Motion کاربر را رعایت کند.

روش پیاده‌سازی

  1. Property مورد تغییر و Duration کوتاه انتخاب کنید.
  2. State شروع و پایان را مشخص کنید.
  3. با motion-reduce یا motion-safe رفتار جایگزین بسازید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<a class="group block rounded-2xl border p-5 transition duration-300 hover:-translate-y-1 hover:shadow-xl">
  <h3 class="font-bold transition group-hover:text-blue-600">کارت آموزش</h3>
  <p class="mt-2 text-sm text-slate-500">برای مشاهده جزئیات کلیک کنید.</p>
</a>

خروجی مورد انتظار

کارت هنگام Hover کمی بالا می‌آید و Shadow می‌گیرد.

نکات مهم و خطاهای رایج

  • transition-all می‌تواند Propertyهای ناخواسته و پرهزینه را Animate کند.
  • انیمیشن دائمی و تزئینی تمرکز کاربر را مختل می‌کند.

تمرین پیشنهادی

مثال را با Reduce Motion سیستم فعال و غیرفعال مقایسه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS