ویژگی transition در CSS کمک می‌کنه تغییر رنگ، اندازه یا حرکت عناصر سایت به‌جای اینکه ناگهانی باشه، نرم و تدریجی انجام بشه.
در این آموزش، با مثال‌های کوتاه، نمودار و یک ابزار تعاملی واقعی یاد می‌گیرید که چطور از Transition برای دکمه‌ها، تصاویر و کارت‌های محصول استفاده کنید.
۱. CSS Transition چیست و چه کاری انجام می‌ده؟
فرض کنید موس رو روی یک دکمه می‌برید و رنگ اون از آبی تیره به آبی روشن تبدیل می‌شه. بدون transition رنگ همون لحظه عوض می‌شه؛ با transition تغییر رنگ در مدت مشخصی اتفاق می‌افته.
گام اول: تفاوت رو با Hover ببینید
برای آزمایش نیازی به کلیک نیست. موس رو روی هر جعبه ببرید و بردارید؛ به رفت و برگشت رنگ دقت کنید. با کلید Tab هم می‌تونید جعبه‌ها رو انتخاب کنید.
روش کار با مثال‌ها: ۱) سمت راست خروجی رو با ماوس امتحان کنید. ۲) سمت چپ کد HTML و CSS رو یک‌جا ببینید. ۳) «کپی کد» رو بزنید، کد رو در Notepad یا VS Code با نامی مثل example.html ذخیره کنید و فایل رو در مرورگر باز کنید.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام دوم: کد رو خط‌به‌خط بفهمیم
در کد بالا، background رنگ اولیه رو مشخص می‌کنه. انتخابگر :hover می‌گه «وقتی نشانگر موس روی عنصر قرار گرفت، رنگ رو تغییر بده». فقط جعبه دوم transition: background-color 1.25s ease; داره؛ یعنی تغییر رنگ اون ۱٫۲۵ ثانیه طول می‌کشه.
transition رو روی حالت اصلی عنصر بنویسید، نه فقط روی :hover، تا موقع برداشتن موس هم تغییر به‌آرامی برگرده. :hover خودش افکت ایجاد نمی‌کنه؛ فقط حالت جدید رو مشخص می‌کنه.گام سوم: خودتون امتحان کنید
کل کد رو کپی کنید، با نام transition-hover.html ذخیره کنید و داخل مرورگر باز کنید. بعد مقدار 1.25s رو به 3s تغییر بدید و تفاوت رو ببینید.
۲. تنظیمات اصلی CSS Transition رو گام‌به‌گام یاد بگیرید
هر نمونه یک خروجی قابل آزمایش و یک فایل کامل HTML و CSS داره. موس رو روی جعبه سمت راست ببرید؛ کد مربوط به همون خروجی رو در ستون چپ ببینید و کپی کنید.
:hover حالت دوم رو فعال می‌کنه و :focus-visible امکان آزمایش با کیبورد رو می‌ده. برای دیدن نتیجه کد به هیچ کتابخانه‌ای نیاز ندارید.گام 1: transition-property — مشخص کردن ویژگی قابل انتقال
اول رنگ جعبه و گردی گوشه‌ها رو هم‌زمان تغییر می‌دیم؛ اما فقط رنگ نرم عوض می‌شه، چون در transition-property فقط background-color نوشته شده.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام 2: transition-duration — مدت‌زمان تغییر
1.5s یعنی یک‌ونیم ثانیه و 500ms یعنی نیم‌ثانیه. موس رو روی جعبه ببرید تا حرکت رو ببینید.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام 3: transition-timing-function — روش تغییر سرعت
مقدار ease-in باعث می‌شه حرکت آهسته شروع بشه و بعد سرعت بگیره. در بخش بعدی پنج حالت رو کنار هم مقایسه می‌کنیم.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام 4: transition-delay — مکث قبل از شروع
وقتی transition-delay: .7s باشه، ابتدا ۰٫۷ ثانیه هیچ تغییری نمی‌بینید و بعد تغییر رنگ در ۰٫۵ ثانیه انجام می‌شه.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام 5: transition — خلاصه‌نویسی چهار تنظیم در یک خط
همین چهار تنظیم رو می‌تونید در یک دستور بنویسید: transition: transform .65s ease-out .15s;. به ترتیب نام ویژگی، مدت، نوع سرعت و تأخیر است.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
گام ۶: transition-behavior — موضوع تکمیلی
بعضی ویژگی‌ها مثل display بین دو مقدار، حالت میانی پیوسته ندارند. در CSS جدید می‌تونیم با allow-discrete و @starting-style نمایش و پنهان‌شدن پیام رو همراه با تغییر شفافیت مدیریت کنیم. این موضوع برای شروع ضروری نیست.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
در تمام مثال‌های این بخش، تغییر ظاهر با CSS انجام می‌شه. فقط مثال آخر برای اضافه و حذف کلاس is-visible از JavaScript استفاده می‌کنه.
۳. تفاوت Timing Function رو با حرکت واقعی یاد بگیرید
فرض کنید پنج جعبه قراره یک مسیر رو در دو ثانیه طی کنن. همه در یک زمان به مقصد می‌رسن، اما بعضی حرکت رو آهسته شروع می‌کنن و بعضی در پایان آهسته می‌شن.
در این نمودارها، زمان از چپ به راست پیش می‌ره و هر خط نشون می‌ده که تغییر تا چه اندازه پیشرفت کرده.
گام عملی: پنج حرکت رو هم‌زمان امتحان کنید
در پیش‌نمایش، روی دکمه «اجرای هم‌زمان حرکت‌ها» کلیک کنید. در سمت چپ، تمام کد HTML، CSS و JavaScript همین آزمایش رو می‌بینید.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
linear با سرعت ثابت حرکت می‌کنه؛ ease در ابتدا سرعت می‌گیره و در پایان آهسته می‌شه؛ ease-in به‌آرومی شروع می‌کنه؛ ease-out به‌آرومی تموم می‌شه؛ ease-in-out هم در ابتدا و هم در پایان حرکت آهسته‌ای داره.۴. ابزار تعاملی: Transition رو خودتون بسازید
از حالت پیش‌فرض Hover شروع کنید: ماوس رو روی نمونه ببرید، بعد ویژگی موردنظر و مدت‌زمانش رو تغییر بدید. در کنار خروجی زنده، کد کامل HTML و CSS قابل مشاهده و کپی قرار داره تا بتونید اون رو در مرورگر خودتون اجرا کنید.
آزمایشگاه Transition
می‌تونید رنگ، اندازه، شفافیت یا حرکت رو انتخاب کنید. حالت پیش‌فرض Hover است؛ ماوس رو روی جعبه ببرید تا تغییر رو ببینید. در دستگاه‌های لمسی می‌تونید حالت کلیک رو انتخاب کنید.
تا وقتی ماوس روی جعبه باشه، رنگ یا اندازه تغییر می‌کنه. با برداشتن ماوس به حالت اول برمی‌گرده.
تنظیم «کاهش حرکت» دستگاه شما روشنه؛ برای دسترسپذیری، انیمیشن این صفحه کوتاه یا غیرفعال شده است.
کد زیر یک فایل HTML کامل و مستقل است. کپی کنید، با پسوند .html ذخیره کنید و در مرورگر باز کنید. خروجی بالا از همین کد ساخته می‌شه.
برای این تمرین، ابتدا رنگ رو انتخاب کنید. مقدار Duration رو یک بار روی 0.3s و بار بعد روی 2s بگذارید. سپس مقدار Delay رو روی 1s قرار بدید. به این ترتیب می‌بینید که «مدت تغییر» با «مکث قبل از شروع» تفاوت داره.
۵. سه کاربرد واقعی CSS Transition
حالا که چهار تنظیم اصلی رو می‌شناسید، سه کاربرد واقعی می‌سازیم. هر مرحله خروجی زنده در سمت راست و سورس کامل و مستقل در سمت چپ داره.
مثال 1: تغییر رنگ و اندازه دکمه
به دکمه در حالت معمولی رنگ آبی می‌دیم و با :hover هم رنگ رو تغییر می‌دیم، هم اون رو ۸ درصد بزرگ‌تر می‌کنیم.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
در کد، دو ویژگی background-color و transform جداگانه در Transition نوشته شده‌اند؛ هر دو در ۰٫۳ ثانیه تغییر می‌کنن.
مثال 2: بزرگ‌شدن تصویر محصول
تصویر داخل یک کادر با overflow: hidden قرار می‌گیره. به‌جای بزرگ‌کردن کل کارت، فقط تصویر با transform: scale(1.15) بزرگ می‌شه.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
کد سمت چپ دقیقاً شکل هدفونِ پیش‌نمایش رو با SVG می‌سازه؛ فایل عکس جداگانه لازم نیست.
مثال 3: نمایش تدریجی Tooltip
Tooltip یعنی متن راهنمای کوچکی که کنار یک دکمه ظاهر می‌شه. ابتدا شفافیت پیام صفر است؛ در Hover شفافیت به یک می‌رسه.
این بخش، خروجی واقعی فایل HTML روبه‌روست؛ روی نمونه Hover کنید یا طبق راهنمای مثال تعامل کنید.
در این مثال از opacity برای محوشدن نرم و از visibility برای پنهان‌بودن پیام در حالت عادی استفاده می‌کنیم.
برای آزمایش کدها، محتوای هر باکس رو در یک فایل .html ذخیره و در مرورگر باز کنید. کدها در باکس سمت چپ فقط متن قابل انتخاب هستند و در همون باکس اجرا نمی‌شن.
۶. تفاوت Transition با Animation چیه؟
| موضوع | Transition | Animation |
|---|---|---|
| شروع اجرا | با تغییر مقدار یک ویژگی؛ مثلاً Hover یا افزودن کلاس | با اعمال animation؛ ممکنه بدون تعامل کاربر هم شروع بشه |
| مسیر تغییر | مرورگر حالت‌های میانی بین مقدار اول و آخر رو ایجاد می‌کنه | می‌تونید چند مرحله رو با @keyframes مشخص کنید |
| بهترین کاربرد | دکمه، کارت، Tooltip و واکنش‌های رابط کاربری | حرکت‌های چندمرحله‌ای، تکراری یا مستقل از Hover |
برای تغییر رنگ دکمه یا بزرگ شدن تصویر، از Transition استفاده کنید. اگر حرکت چند مرحله داره یا قراره مرتب تکرار بشه، Animation معمولاً انتخاب مناسب‌تریه.
۷. چرا گاهی Transition درست کار نمی‌کنه؟
- Transition اجرا نمی‌شه؟ ابتدا بررسی کنید که برای عنصر دو حالت متفاوت تعیین کرده باشید و مدت‌زمان تغییر
0sنباشه. بعضی مقدارها مثلautoهم همیشه به‌صورت نرم تغییر نمی‌کنن. - چرا
display: noneمثلopacityنرم تغییر نمی‌کنه؟displayمثل رنگ، حالت‌های میانی نداره. در مرورگرهای جدید،transition-behavior: allow-discreteو@starting-styleکمک می‌کنن ورود و خروج عنصر رو همراه باopacityکنترل کنیم. برای یک Tooltip ساده، استفاده ازopacityوvisibilityساده‌تره. توضیح MDN - چرا
transformمعمولاً بهتر ازtopوleftاست؟ وقتی فقط می‌خواهید یک عنصر حرکت کنه،transformمعمولاً حرکت روان‌تری ایجاد می‌کنه؛ چون اغلب نیازی به محاسبه دوباره چیدمان بقیه عناصر نداره. - چرا
transition: allپیشنهاد نمی‌شه؟ باallممکنه ویژگی‌هایی تغییر کنن که قصد تغییرشون رو نداشتید. بهتره فقط نام ویژگی موردنیاز، مثلopacity، رو مشخص کنید. - Transition رو فقط روی
:hoverنوشتید؟ Transition رو روی خود عنصر قرار بدید، نه فقط روی:hover؛ به این ترتیب، هم تغییر رفت و هم برگشت به‌آرومی انجام می‌شن.
۸. تمرین نهایی: کارت محصول با سه Transition
گام ۱: موس رو روی کارت سمت راست ببرید؛ تصویر بزرگ می‌شه، دکمه تغییر رنگ می‌ده و سایه کارت بیشتر می‌شه.
گام ۲: تمام کد HTML و CSS کارت رو از سمت چپ کپی کنید، در فایل product.html ذخیره کنید و بازش کنید.
ماوس رو روی کارت محصول ببرید یا با Tab روی دکمه داخلش فوکوس کنید. سه تغییر اتفاق می‌افته: تصویر کمی بزرگ می‌شه، رنگ دکمه تغییر می‌کنه و سایه کارت بیشتر می‌شه. همه این تغییرات با CSS انجام شده.
کد کامل HTML و CSS · قابل کپی
این کد یک فایل HTML کامل و مستقل است؛ اون رو با نام product.html ذخیره کنید و در مرورگر باز کنید. شکل هدفون و افکت‌ها با پیش‌نمایش همین صفحه یکسان‌اند.
0.8s قرار بدید و ease-out رو امتحان کنید. حالا می‌تونید از همین الگو در کارت دوره‌های سایت خودتون استفاده کنید.می‌خواهید طراحی سایت رو اصولی یاد بگیرید؟
اگر یادگیری رو با CSS شروع کردید و می‌خواهید HTML، CSS و JavaScript رو با پروژه‌های عملی یاد بگیرید، دوره طراحی سایت تحلیل‌داده می‌تونه قدم بعدی شما باشه. کلاس‌ها به‌صورت حضوری در تهران و آنلاین زنده برگزار می‌شن و امکان رفع اشکال مستقیم با مدرس و AnyDesk وجود داره.