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

Transform، Transition و Animation

Animation و Motion Safe

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

محتوای درس Animation و Motion Safe

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

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

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

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

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

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

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

index.html
<span class="inline-flex size-5 animate-spin rounded-full border-2 border-slate-300 border-t-blue-600
  motion-reduce:animate-none"></span>

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

Spinner که در حالت Reduce Motion انیمیشن ندارد.

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

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

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

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

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