CSS/transition – ایجاد انتقال‌های نرم در CSS

transition در CSS برای ایجاد انیمیشن‌های ساده و نرم بین دو وضعیت (مانند هاور یا تغییر کلاس) استفاده می‌شود. این ویژگی به عناصر HTML اجازه می‌دهد که به‌جای تغییر ناگهانی، به‌صورت تدریجی به مقدار جدید برسند.

کاربرد

از Transition برای زیباتر کردن رابط کاربری استفاده می‌شود؛ مثلاً:

تغییر رنگ دکمه هنگام هاور
باز و بسته شدن منوها
بزرگ یا کوچک شدن تصاویر

سینتکس

شکل کلی استفاده از transition:

selector {
  transition: property duration timing-function delay;
}

مثال:

button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

ویژگی‌های مرتبط

transition از چهار ویژگی جزئی تشکیل شده است:

transition-property – مشخص می‌کند کدام ویژگی CSS باید انیمیشن شود (مثلاً color، width، all)
transition-duration – مدت زمان انتقال (مانند 0.5s یا 200ms)
transition-timing-function – چگونگی سرعت انتقال (linear، ease، ease-in، ease-out، ease-in-out، steps(n)، cubic-bezier)
transition-delay – تاخیر قبل از شروع انیمیشن

مثال ساده با همه پارامترها

.box {
  width: 100px;
  transition: width 0.5s ease-in 0.2s;
}

.box:hover {
  width: 200px;
}

مقدار all در transition

اگر می‌خواهید چندین ویژگی با هم انیمیشن شوند، می‌توانید از all استفاده کنید:

.box {
  transition: all 0.3s ease;
}

البته استفاده زیاد از all ممکن است بر کارایی تاثیر منفی بگذارد. بهتر است فقط ویژگی‌های مورد نیاز را مشخص کنید.

چند ویژگی به‌صورت جدا

می‌توانید چند ویژگی را با ویرگول جدا کنید:

div {
  transition: color 0.3s ease, font-size 0.5s linear;
}

استفاده در JavaScript

با تغییر استایل در جاوااسکریپت هم می‌توان transition را فعال کرد:

document.querySelector('.box').style.width = "300px";

اگر در CSS برای آن عنصر transition تعریف شده باشد، این تغییر با انیمیشن اجرا می‌شود.

نکات مهم

برای دیدن اثر transition، عنصر باید حالت اولیه و حالت نهایی داشته باشد.
با Pseudo-classهایی مانند :hover یا :focus سازگار است.
برخی ویژگی‌ها مانند display قابل انیمیشن نیستند.
در استفاده زیاد روی موبایل یا مرورگرهای ضعیف ممکن است باعث افت عملکرد شود.

سازگاری مرورگر

ویژگی transition در همه مرورگرهای مدرن (کروم، فایرفاکس، سافاری، اج) پشتیبانی می‌شود. حتی نسخه‌های جدید اینترنت اکسپلورر (IE10+) هم آن را پشتیبانی می‌کنند.

سئو و تجربه کاربری

در حالی که transition تاثیری مستقیم بر سئو ندارد، اما:

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

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

یک عنصر مربعی با پس‌زمینهٔ سبز طراحی کنید. وقتی کاربر موس را روی آن ببرد، اندازه، رنگ و گوشه‌های آن (border-radius) به‌آرامی تغییر کند. زمان تغییر ۰٫۵ ثانیه باشد و از تابع ease-in-out استفاده شود.

پیوندهای مفید

صفحه transition در MDN (انگلیسی)

جمع‌بندی

transition یکی از ساده‌ترین روش‌ها برای افزودن پویایی و زیبایی به صفحات وب است. با زمان کوتاهی یادگیری، می‌توان رابط کاربری را بسیار جذاب‌تر کرد و تجربه کاربر را بهبود داد.