اگر بخواهیم یک سایت حرفه‌ای و کاربرپسند داشته باشیم، باید به جزئیات توجه کنیم. یکی از همین جزئیات مهم در طراحی وب ترنزیشن (Transition) در CSS است. ترنزیشن کمک می‌کند تغییرات روی المان‌ها نرم و جذاب اتفاق بیفتد، نه به صورت ناگهانی. همین موضوع باعث می‌شود تجربه کاربر بهتر شود و سایت شما حرفه‌ای‌تر به نظر برسد.
ترنزیشن در CSS چیست؟
به زبان ساده، ترنزیشن در CSS قابلیتی است که باعث می‌شود وقتی یک ویژگی (property) تغییر می‌کند، این تغییر به‌صورت تدریجی نمایش داده شود. مثلاً وقتی رنگ یک دکمه از قرمز به آبی تغییر می‌کند، به‌جای اینکه ناگهانی عوض شود، به‌آرامی تغییر رنگ بدهد.
چرا ترنزیشن مهم است؟
جذاب‌تر شدن ظاهر سایت
ایجاد حس روان بودن در حرکت‌ها
افزایش توجه کاربر به بخش‌های مهم
حرفه‌ای‌تر شدن تجربه کاربری
نحوه استفاده از ترنزیشن
برای استفاده از ترنزیشن کافی است ویژگی موردنظر را مشخص کنیم. به‌عنوان مثال، می‌توانیم تغییر رنگ پس‌زمینه (background-color) یا تغییر عرض (width) یک المان را به‌صورت نرم اجرا کنیم. همچنین می‌توانیم مدت زمان و نوع سرعت تغییر را تعیین کنیم.
استفاده روی ویژگی‌های مختلف
تقریباً روی اکثر ویژگی‌های CSS می‌توان ترنزیشن اعمال کرد؛ مثل رنگ، اندازه، ارتفاع یا حتی موقعیت. البته برای بعضی ویژگی‌ها مثل پس‌زمینه تصویری (background-image) کار نمی‌کند، اما روی رنگ پس‌زمینه جواب می‌دهد.
ترفند حرفه‌ای: ترنزیشن برای کل صفحه
یک ترفند جذاب این است که ترنزیشن را برای همه المان‌های صفحه فعال کنید. به این شکل، هر تغییری که روی عناصر اتفاق بیفتد به‌صورت نرم نمایش داده می‌شود. البته گاهی ممکن است باعث ایجاد باگ شود، که در این صورت می‌توان برای بعضی المان‌ها آن را غیرفعال کرد.
برای یادگیری این موارد ویدیو همین صفحه رو ببینید و اگر علاقه‌مند هستید CSS رو به‌صورت کامل‌تر یاد بگیرید، می‌تونید در دوره آموزش CSS شرکت کنید:
