انیمیشن‌ها و ترنزیشن‌ها، قلب طراحی مدرن در دنیای وب هستند. آن‌ها کمک می‌کنند صفحات وب از یک ظاهر ایستا، به تجربه‌ای زنده و تعاملی تبدیل شوند. اگرچه هر دو به حرکت و تغییر ظاهر المان‌ها مربوط می‌شوند، اما تفاوت‌های اساسی میان آن‌ها وجود دارد که شناختن این تفاوت‌ها برای هر طراح وب ضروری است.

🔶 Transition در CSS

یکی از ساده‌ترین روش‌ها برای ایجاد تغییرات نرم در CSS، استفاده از ترنزیشن است. ترنزیشن به ما امکان می‌دهد که تغییر مقدار یک خاصیت CSS، به‌جای اینکه ناگهانی اتفاق بیفتد، طی بازه‌ای از زمان انجام شود. چهار ویژگی مهم در ترنزیشن وجود دارد که باید آن‌ها را بشناسی:

  • transition-property مشخص می‌کند کدام ویژگی CSS قرار است تغییر کند.
  • transition-duration مدت زمان تغییر را تعیین می‌کند.
  • transition-timing-function نوع حرکت تغییر را مشخص می‌کند؛ مثلاً تغییر یکنواخت باشد یا ابتدا سریع و بعد آهسته.
  • transition-delay تعیین می‌کند تغییر از چه زمانی بعد از وقوع رویداد شروع شود.

ترنزیشن بیشتر برای موقعیت‌هایی مثل تغییر رنگ دکمه هنگام hover یا تغییر سایز المان‌ها در پاسخ به تعامل کاربر استفاده می‌شود و به ما کمک می‌کند تغییرات ظاهری را برای کاربر طبیعی‌تر و قابل درک‌تر کنیم.

🔶 Animation در CSS

زمانی که بخواهیم تغییرات پیچیده‌تر و مداوم ایجاد کنیم، نوبت به انیمیشن‌ها در CSS می‌رسد. برخلاف ترنزیشن که فقط از یک حالت به حالت دیگر تغییر می‌کند، انیمیشن می‌تواند چندین مرحله (keyframes) داشته باشد و در حلقه تکرار شود.

انیمیشن‌ها در CSS با استفاده از قانون @keyframes ساخته می‌شوند. در این قانون، وضعیت‌های مختلف یک المان در درصدهای مختلف زمان تعریف می‌شود. سپس این keyframes به المان مورد نظر متصل می‌شود و با ویژگی‌های زیر کنترل می‌شود:

  • animation-name نام keyframes را مشخص می‌کند.
  • animation-duration مدت زمان اجرای انیمیشن را تعیین می‌کند.
  • animation-timing-function شکل حرکت انیمیشن را مشخص می‌کند.
  • animation-iteration-count تعداد دفعات تکرار انیمیشن را تعیین می‌کند.
  • animation-fill-mode تعیین می‌کند المان بعد از پایان انیمیشن در چه حالتی باقی بماند.
  • animation-delay مشخص می‌کند انیمیشن با چه تأخیری آغاز شود.
  • animation-direction جهت حرکت انیمیشن را کنترل می‌کند؛ مثلاً عادی، معکوس یا رفت و برگشتی.

به کمک انیمیشن‌ها می‌توان جلوه‌هایی مثل تکان خوردن، محو شدن، چرخش یا حرکت المان‌ها در مسیرهای پیچیده را پیاده‌سازی کرد. این ابزار قدرتمند است و استفاده صحیح از آن می‌تواند تجربه کاربری سایت را چندین برابر جذاب‌تر کند.

🔶 Easing Functions

چه در ترنزیشن و چه در انیمیشن، همیشه صحبت از timing-function است. این ویژگی تعیین می‌کند تغییرات ظاهری چگونه اتفاق بیفتند. آیا حرکت یکدست باشد؟ ابتدا سریع و بعد آهسته شود؟ یا برعکس؟

این مفاهیم در CSS با نام Easing Functions شناخته می‌شوند. مشهورترین آن‌ها شامل موارد زیر هستند:

  • ease که تغییر را با سرعت متوسط شروع کرده، سریع می‌کند و دوباره آهسته می‌شود.
  • ease-in که حرکت را آهسته شروع می‌کند.
  • ease-out که تغییر را آهسته به پایان می‌رساند.
  • ease-in-out ترکیبی از هر دو است.
  • linear که تغییر را کاملاً یکنواخت انجام می‌دهد.
  • cubic-bezier که امکان ساخت حرکت‌های بسیار سفارشی و خاص را می‌دهد.

استفاده درست از easing functions باعث می‌شود حرکت‌ها طبیعی‌تر و کاربرپسندتر شوند.

🔶 تفاوت Animation و Transition

شاید مهم‌ترین موضوعی که باید در این بحث بدانی، تفاوت Animation و Transition است. ترنزیشن تنها در پاسخ به یک تغییر اتفاق می‌افتد؛ مثلاً وقتی کاربر موس را روی یک دکمه می‌برد. اما انیمیشن می‌تواند به‌صورت خودکار و مستقل از هر رویداد آغاز شود و در چندین مرحله تکرار شود یا در یک حلقه بی‌پایان بچرخد. بنابراین، هرکدام کاربرد خاص خود را دارند و استفاده صحیح از آن‌ها بستگی به هدف طراحی دارد.

انیمیشن و ترنزیشن در CSS، اگر درست و به‌اندازه استفاده شوند، می‌توانند طراحی وب را بسیار حرفه‌ای و لذت‌بخش کنند. اما فراموش نکن که استفاده بیش از حد یا بدون دلیل از انیمیشن‌ها، می‌تواند باعث سنگین شدن سایت و تجربه کاربری بد شود. در مقالات بعدی، هرکدام از این موضوعات را به‌صورت جزئی و عملی بررسی خواهیم کرد تا بتوانی به‌راحتی آن‌ها را در پروژه‌های واقعی خود به‌کار ببری.