جلسه سیزدهم: خاصیت Transition در CSS و نحوه کار با آن

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

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

خاصیت Transition در CSS چیه و چه کاری انجام می‌ده؟

خاصیت Transition در CSS تغییر بین دو مقدار رو طی یک بازه زمانی نمایش می‌ده. بدون Transition، مرورگر مقدار قبلی رو فوری با مقدار جدید عوض می‌کنه. با Transition، همین تغییر به‌شکل تدریجی و نرم دیده می‌شه.

تفاوت تغییر فوری با تغییر نرم استایل

فرض کنید رنگ پس‌زمینه یک دکمه آبیه و موقع رفتن نشانگر ماوس روی اون قرمز می‌شه. بدون Transition، رنگ دکمه همون لحظه عوض می‌شه. اگه مدت Transition رو روی ۰٫۳ ثانیه بذارید، مرورگر رنگ‌های بین آبی و قرمز رو هم نمایش می‌ده و نتیجه طبیعی‌تر به نظر می‌رسه.

Transition برای چه ویژگی‌هایی کار می‌کنه؟

Transition برای ویژگی‌هایی کار می‌کنه که مرورگر بتونه مقدارهای میانی اون‌ها رو محاسبه کنه. رنگ، شفافیت، موقعیت و زاویه چند نمونه رایج هستن. مثلا مرورگر می‌تونه مقدار opacity رو کم‌کم از 1 به 0 برسونه.

ولی همه ویژگی‌ها انتقال‌پذیر نیستن. برای نمونه، تغییر display از none به block مثل تغییر یک کلید روشن و خاموشه و مقدار میانی معمولی نداره. برای محوکردن عنصر بهتره از opacity کمک بگیرید.

ساختار کلی Transition در CSS

برای ساخت Transition به دو مقدار متفاوت نیاز دارید. مقدار اول داخل حالت عادی عنصر نوشته می‌شه و مقدار دوم داخل حالتی مثل :hover قرار می‌گیره. :hover یعنی زمانی که نشانگر ماوس روی عنصر قرار گرفته.

حالت عادی و حالت مقصد عنصر رو چطور مشخص کنیم؟

کد زیر یک دکمه با پس‌زمینه آبی می‌سازه. حالت مقصد هم داخل انتخابگر .button:hover مشخص شده و رنگ رو به بنفش تغییر می‌ده:

.button {  background-color: #2563eb;}.button:hover {  background-color: #7c3aed;}

اگه همین کد رو اجرا کنید، رنگ فوری عوض می‌شه. برای نرم‌کردن تغییر باید خاصیت transition رو به حالت عادی دکمه اضافه کنید.

اولین مثال ساده با تغییر رنگ در حالت Hover

.button {  padding: 12px 24px;  color: #ffffff;  background-color: #2563eb;  border: 0;  border-radius: 8px;  cursor: pointer;  transition: background-color 300ms ease;}.button:hover {  background-color: #7c3aed;}

توی این نمونه، فقط background-color طی ۳۰۰ میلی‌ثانیه تغییر می‌کنه. وقتی نشانگر ماوس از روی دکمه کنار می‌ره، رنگ با همون زمان‌بندی به حالت اول برمی‌گرده.

اجرای یک مثال کامل Transition در مرورگر

برای امتحان‌کردن این مثال، یک فایل با نام transition-example.html بسازید. بعد کد زیر رو کامل داخل فایل بذارید و فایل رو با مرورگر باز کنید. حالا نشانگر ماوس رو روی دکمه ببرید یا با کلید Tab دکمه رو انتخاب کنید تا تغییر نرم رنگ و اندازه رو ببینید.

<!DOCTYPE html><html lang="fa" dir="rtl"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>مثال Transition در CSS</title>  <style>    .buy-button {      padding: 12px 24px;      color: #ffffff;      background-color: #2563eb;      border: 0;      border-radius: 8px;      font-size: 16px;      cursor: pointer;      transform: scale(1);      transition: background-color 300ms ease, transform 300ms ease;    }    .buy-button:hover,    .buy-button:focus-visible {      background-color: #7c3aed;      transform: scale(1.05);    }  </style></head><body>  <button class="buy-button">خرید محصول</button></body></html>

در حالت عادی، دکمه آبیه و اندازه معمولی داره. وقتی نشانگر ماوس روی دکمه می‌ره، رنگ اون بنفش می‌شه و کمی بزرگ‌تر دیده می‌شه. این تغییرها به‌خاطر transition طی ۳۰۰ میلی‌ثانیه و به‌شکل نرم انجام می‌شن.

حالت :focus-visible هم کمک می‌کنه کاربری که با کیبورد و کلید Tab کار می‌کنه، همین افکت رو ببینه. یادتون نره Hover روی گوشی همیشه مثل کامپیوتر عمل نمی‌کنه؛ پس افکت Hover نباید تنها راه نمایش یک اطلاعات یا انجام یک کار مهم باشه.

بخش‌های اصلی خاصیت Transition

Transition چهار بخش اصلی داره: نام ویژگی، مدت اجرا، مدل حرکت و تأخیر شروع. می‌تونید این بخش‌ها رو جداگانه بنویسید یا همه رو داخل خاصیت کوتاه transition قرار بدید.

انتخاب ویژگی با Transition-Property

transition-property مشخص می‌کنه تغییر کدوم ویژگی باید نرم باشه. مقدار اولیه اون all هست؛ یعنی اگه نام ویژگی رو ننویسید، همه ویژگی‌های قابل‌انتقال در نظر گرفته می‌شن.

.button {  transition-property: background-color;}

چرا بهتره به‌جای All نام ویژگی رو بنویسید؟

نوشتن نام دقیق ویژگی باعث می‌شه رفتار عنصر قابل‌پیش‌بینی‌تر باشه. اگه بعدا ویژگی دیگه‌ای به عنصر اضافه کنید، با مقدار all ممکنه اون تغییر هم ناخواسته نرم اجرا بشه. پس بهتره مثلا opacity یا transform رو مستقیم بنویسید.

تنظیم مدت اجرا با Transition-Duration

transition-duration مدت تغییر رو مشخص می‌کنه. مقدار اولیه اون 0s هست. پس اگه مدت اجرا رو ننویسید یا روی صفر بذارید، تغییر فوری دیده می‌شه.

.button {  transition-property: background-color;  transition-duration: 300ms;}

تفاوت واحدهای ثانیه و میلی‌ثانیه

واحد s یعنی ثانیه و واحد ms یعنی میلی‌ثانیه. هر ۱۰۰۰ میلی‌ثانیه برابر یک ثانیه‌ست؛ پس 300ms با 0.3s فرقی نداره. برای واکنش‌های رابط کاربری معمولا چندصد میلی‌ثانیه حس سریع‌تر و طبیعی‌تری ایجاد می‌کنه، ولی زمان مناسب به نوع افکت بستگی داره.

کنترل مدل حرکت با Transition-Timing-Function

transition-timing-function تعیین می‌کنه سرعت تغییر در طول زمان چه الگویی داشته باشه. این بخش مدت کلی رو عوض نمی‌کنه؛ فقط نحوه پخش‌شدن سرعت بین شروع و پایان رو تغییر می‌ده.

• مقدار Ease: حرکت با تغییر سرعت شروع و تموم می‌شه و مقدار پیش‌فرضه.
• مقدار Linear: سرعت از اول تا آخر یکنواخت می‌مونه.
• مقدار Ease-In: حرکت آروم شروع می‌شه و بعد سرعت می‌گیره.
• مقدار Ease-Out: حرکت سریع‌تر شروع می‌شه و نزدیک پایان آروم می‌شه.
• مقدار Ease-In-Out: شروع و پایان آروم‌تره و بخش میانی سرعت بیشتری داره.
• تابع Cubic-Bezier: با cubic-bezier(x1, y1, x2, y2) می‌تونید منحنی حرکت دلخواهتون رو بسازید. مقدارهای افقی دو نقطه کنترلی، یعنی x1 و x2، باید بین صفر و یک باشن؛ ولی مقدارهای عمودی می‌تونن بیرون این بازه هم قرار بگیرن.

.button {  transition-timing-function: ease-out;}

ایجاد مکث با Transition-Delay

transition-delay مشخص می‌کنه افکت چند ثانیه یا میلی‌ثانیه بعد از تغییر حالت شروع بشه. مقدار اولیه اون 0s هست؛ یعنی Transition بدون مکث شروع می‌شه.

.button {  transition-delay: 150ms;}

تأخیر زیاد ممکنه رابط کاربری رو کند نشون بده. پس فقط وقتی از Delay استفاده کنید که مکث بخشی از تجربه موردنظرتون باشه.

کوتاه‌نویسی Transition چطور انجام می‌شه؟

به‌جای نوشتن چهار خاصیت جدا، می‌تونید همه مقدارها رو داخل transition بنویسید. این روش کد رو کوتاه‌تر و خوندن اون رو ساده‌تر می‌کنه.

ترتیب مقدارها در خاصیت Transition

ساختار رایج کوتاه‌نویسی به این شکله:

transition: property duration timing-function delay;

مثال زیر رنگ پس‌زمینه رو طی ۳۰۰ میلی‌ثانیه، با مدل ease و پس از ۱۰۰ میلی‌ثانیه مکث تغییر می‌ده:

.button {  transition: background-color 300ms ease 100ms;}

اولین مقدار زمانی همیشه مدت اجراست. اگه دو مقدار زمانی بنویسید، مقدار دوم به‌عنوان تأخیر در نظر گرفته می‌شه.

تعریف چند Transition برای یک عنصر

برای تغییر چند ویژگی، هر Transition رو با ویرگول از بعدی جدا کنید. هر ویژگی می‌تونه مدت و مدل حرکت مخصوص خودش رو داشته باشه:

.card {  transition: transform 250ms ease-out, opacity 400ms linear;}

ساخت چند افکت کاربردی با Transition

حالا که اجزای Transition رو می‌شناسید، می‌تونید چند افکت ساده و کاربردی بسازید. هر نمونه رو جدا امتحان کنید تا اثر مدت و مدل حرکت رو بهتر ببینید.

تغییر نرم رنگ دکمه

.color-button {  color: #ffffff;  background-color: #0f766e;  transition: background-color 250ms ease;}.color-button:hover {  background-color: #115e59;}

Transition روی حالت عادی نوشته شده تا تغییر رنگ در رفتن و برگشتن نشانگر ماوس نرم اجرا بشه.

تغییر شفافیت با Opacity

opacity میزان شفافیت عنصر رو مشخص می‌کنه. مقدار 1 یعنی عنصر کاملا دیده می‌شه و مقدار 0 یعنی کاملا شفافه.

.photo {  opacity: 1;  transition: opacity 300ms ease;}.photo:hover {  opacity: 0.65;}

بزرگ‌کردن عنصر با Transform و Scale

transform ویژگی تغییر شکل عنصره و تابع scale() اندازه نمایشی اون رو تغییر می‌ده. مقدار 1.05 یعنی عنصر کمی بزرگ‌تر از اندازه عادی دیده می‌شه.

.card {  transform: scale(1);  transition: transform 250ms ease-out;}.card:hover {  transform: scale(1.05);}

ساخت حرکت نرم با Transform و Translate

تابع translateY() عنصر رو روی محور عمودی جابه‌جا می‌کنه. مقدار منفی عنصر رو به بالا می‌بره:

.card {  transform: translateY(0);  transition: transform 250ms ease-out;}.card:hover {  transform: translateY(-8px);}

چطور Transition روان‌تر و سریع‌تری بسازیم؟

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

استفاده از Transform و Opacity برای حرکت بهتر

برای جابه‌جایی، بزرگ‌کردن یا محوکردن عناصر معمولا transform و opacity انتخاب‌های مناسبی هستن. این ویژگی‌ها در خیلی از موقعیت‌ها بدون محاسبه دوباره چیدمان کل صفحه تغییر می‌کنن.

چرا تغییر Width و Height ممکنه سنگین‌تر باشه؟

تغییر width و height ممکنه اندازه و جای عناصر اطراف رو هم عوض کنه. در این حالت مرورگر دوباره چیدمان بخش‌هایی از صفحه رو حساب می‌کنه. اگه فقط می‌خواید عنصر از نظر ظاهری بزرگ یا کوچک بشه، بهتره transform: scale() رو امتحان کنید.

پشتیبانی از تنظیم Prefers-Reduced-Motion

بعضی کاربرها در تنظیمات دستگاهشون کاهش حرکت رو فعال می‌کنن. عبارت prefers-reduced-motion یک Media Query یا «شرط وابسته به تنظیمات دستگاه» هست که کمک می‌کنه به این انتخاب احترام بذارید.

@media (prefers-reduced-motion: reduce) {  .button,  .card,  .photo {    transition-duration: 0.01ms;  }}

توی پروژه واقعی می‌تونید حرکت‌های غیرضروری رو داخل این شرط حذف کنید یا مدت اون‌ها رو خیلی کوتاه در نظر بگیرید.

اشتباه‌های رایج موقع کار با Transition

• فراموش‌کردن Transition-Duration: مقدار اولیه مدت اجرا صفره؛ پس بدون تعیین زمان، تغییر نرم دیده نمی‌شه.
• قرارندادن تفاوت بین حالت اول و حالت مقصد: اگه مقدار ویژگی در هر دو حالت یکسان باشه، چیزی برای نمایش‌دادن ندارید.
• استفاده بی‌دلیل از Transition-Property: All: بهتره ویژگی دقیق رو بنویسید تا تغییرهای ناخواسته وارد افکت نشن.
• تلاش برای تغییر ویژگی‌های انتقال‌ناپذیر: ویژگی‌ای مثل display انتقال معمولی نداره؛ پس برای محوشدن بهتره از opacity استفاده کنید.
• نوشتن Transition فقط داخل حالت Hover: در این حالت ممکنه برگشت عنصر به حالت عادی فوری اجرا بشه. Transition رو روی انتخابگر اصلی عنصر بذارید.

پشتیبانی مرورگرها از Transition

مرورگرهای امروزی از Transition استاندارد CSS پشتیبانی می‌کنن. برای پروژه‌های جدید می‌تونید شکل عادی این خاصیت رو بنویسید و نیازی به کدهای مخصوص مرورگرهای قدیمی ندارید.

آیا مرورگرهای امروزی به پیشوند نیاز دارن؟

نه. برای مرورگرهای امروزی لازم نیست پیشوندهایی مثل -webkit- یا -moz- رو به Transition اضافه کنید. همون transition استاندارد برای کدهای جدید کافیه.

جمع‌بندی

خاصیت Transition در CSS راه ساده‌ای برای نرم‌کردن تغییر استایل عناصره. برای شروع، حالت عادی و حالت مقصد رو مشخص کنید و بعد نام ویژگی، مدت اجرا، مدل حرکت و تأخیر رو داخل transition بنویسید.

بهتره به‌جای all نام ویژگی موردنظرتون رو وارد کنید و برای حرکت‌های روان‌تر سراغ transform و opacity برید. با چند بار تغییر مدت و مدل حرکت، خیلی زود می‌تونید حس مناسب هر دکمه، کارت یا تصویر رو پیدا کنید.

سوالات متداول درباره خاصیت Transition در CSS

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.