سلام دوستان،
توی این درس قراره با یک ویژگی خیلی جذاب در CSS به اسم transition آشنا بشیم.

این ویژگی به ما اجازه می‌ده بین دو مقدار مختلف، یک انیمیشن نرم و روان یا همون “انتقال” ایجاد کنیم.
حالا توضیحش با کلمات شاید کمی سخت باشه.
پس بریم سراغ عمل!

اینجا جلوی شما یک صفحه‌ی نمونه داریم.
می‌خوام روی این لینک‌هایی که توی قسمت هدر هستن تمرکز کنید.

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

حالا کدی که توی CSS برای ایجاد این حالت hover نوشتیم چیز جدیدی نیست.
ما توی درس‌های قبل با pseudo selector :hover آشنا شدیم.
اینجا هم دقیقا داریم لینک‌ها رو استایل می‌دیم و بعد با :hover می‌گیم: “وقتی موس رفت روی یکی از لینک‌ها، این استایل‌های خاص رو اعمال کن”.
یعنی رنگ پس‌زمینه رو عوض می‌کنیم و رنگ متن رو هم تغییر می‌دیم.

اما یک نکته هست: این تغییر حالت بین حالت عادی و حالت hover خیلی ناگهانی و سریع اتفاق می‌افته.
در واقع لینک توی کسری از ثانیه (تقریبا یک میلی‌ثانیه) از یه استایل به استایل دیگه می‌پره.

حالا تصور کنید اگر بخوایم این تغییر حالت به جای ناگهانی بودن، دو ثانیه طول بکشه چی؟
اینطوری چشم ما می‌تونه تمام حالت‌های بین سفید تا آبی تیره رو به صورت تدریجی و نرم ببینه.

اینجاست که ویژگی transition وارد می‌شه.

پس بریم سراغ stylesheet.
توی قوانین مربوط به لینک‌هامون یک ویژگی جدید به اسم transition-property اضافه می‌کنم.
اینجا مشخص می‌کنیم مرورگر باید روی کدوم ویژگی‌ها “چشم بذاره” و تغییراتشون رو ردیابی کنه.

مثلا شروع می‌کنیم با رنگ متن یا همون color.

بعدش یک ویژگی دیگه اضافه می‌کنم: transition-duration.
این همون جاییه که مشخص می‌کنیم این انتقال چقدر طول بکشه.
من می‌گم: “دو ثانیه”. یعنی 2s.

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

ولی اگر بخوایم رنگ پس‌زمینه هم همین رفتار رو داشته باشه چی؟
خیلی ساده.
کافیه توی transition-property، بعد از color، با یک کاما اضافه کنیم: background-color.

ذخیره و ریفرش…
عالی! الان هم متن و هم پس‌زمینه، هر دو طی دو ثانیه نرم و روان تغییر می‌کنن.

🔹 اینجا یک نکته‌ی کاربردی هم بهتون بگم:
اگر بخواید همه‌ی ویژگی‌ها transition داشته باشن، دیگه لازم نیست تک‌تک بنویسید.
کافیه فقط بنویسید: all.
من خودم بیشتر وقتا همین all رو استفاده می‌کنم.
ولی خوبه بدونید که اگر بخواید، می‌تونید خیلی دقیق بگید کدوم ویژگی‌ها تغییر کنن.

خب، پس ما یاد گرفتیم چطور بین دو مقدار، یک انتقال نرم داشته باشیم.
ولی واقعیتش اینه که محو شدن بین دو رنگ خیلی هم هیجان‌انگیز نیست.
پس بیاید یکم ماجراجویانه‌تر عمل کنیم!

بریم پایین‌تر توی صفحه‌ی نمونه.
اینجا یک تصویر داریم که یک کَپشن (متن توضیحی) روی اون قرار گرفته.
این کپشن یک پس‌زمینه‌ی مشکی نیمه‌شفاف داره.
این افکت رو توی یکی از درس‌های قبلی یاد گرفتیم.

ولی حالا می‌خوایم یک ترفند جدید بهش اضافه کنیم.
فرض کنید می‌خوایم این کپشن به صورت پیش‌فرض پنهان باشه و فقط وقتی موس رفت روی تصویر ظاهر بشه.
و خب نمی‌خوایم ناگهانی ظاهر بشه!
می‌خوایم به صورت تدریجی محو-در-حال-ظاهر شدن، بیاد روی صفحه.

توی HTML، این کپشن کلاس banner-description داره.
پس توی CSS می‌گردم دنبال همین کلاس.

اولین کاری که می‌کنم اینه که محتوای کپشن رو در حالت عادی پنهان می‌کنم.
روش‌های مختلفی برای این کار هست.
من از متد transform: translateY استفاده می‌کنم.
یعنی کپشن رو به سمت پایین هل می‌دم تا بره از دید خارج بشه.

به جای اینکه حدس بزنم چند پیکسل باید پایین بره، می‌نویسم: 100%.
این یعنی به اندازه‌ی ارتفاع خودش بره پایین.

ذخیره و ریفرش…
بله! کپشن دقیقا به اندازه‌ی مناسب پایین رفته.

ولی هنوز یه مشکل هست: کپشن دیده می‌شه، فقط از جاش حرکت کرده.
برای اینکه کاملا پنهان بشه، می‌تونیم از ساختار HTML کمک بگیریم.

کپشن ما (banner-description) داخل یک div با کلاس image-banner قرار داره.
پس می‌تونیم به parent (تصویر) بگیم: هر چیزی که از محدوده‌ش بیرون بزنه، مخفی کن.
یعنی: overflow: hidden.

حالا ریفرش کنیم…
عالی! کپشن دیگه دیده نمی‌شه.

حالا وقتشه کپشن رو با hover برگردونیم.
پس یک قانون جدید می‌نویسم:
وقتی موس رفت روی image-banner، استایل جدیدی روی banner-description اعمال بشه.

اینجا به جای translateY(100%)، می‌نویسیم translateY(0).
یعنی: “برو به حالت عادی”.

الان اگر موس رو روی تصویر ببریم، کپشن ظاهر می‌شه.
اما این درس در مورد transition هست!
ما نمی‌خوایم ناگهانی ظاهر بشه.
می‌خوایم حرکتش نرم باشه.

پس توی استایل banner-description ویژگی transition رو اضافه می‌کنیم.
می‌گیم: transition: all 1s;

حالا ذخیره و ریفرش…
عالی! کپشن خیلی نرم به سمت بالا حرکت می‌کنه و ظاهر می‌شه.

ولی بذارید یکم بهترش کنیم.
می‌خوایم کپشن همزمان که بالا میاد، از شفافیت صفر به یک برسه.

پس توی حالت عادی می‌نویسیم: opacity: 0
و توی حالت hover می‌نویسیم: opacity: 1

حالا چون transition روی all تنظیم شده، مرورگر هم حرکت Y رو در نظر می‌گیره، هم تغییر opacity رو.
نتیجه؟ یک افکت محو-شدن همراه با بالا آمدن. خیلی شیک!

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

خیلی راحت:
توی CSS برای تصویر یک hover rule می‌نویسیم.
وقتی روی image-banner hover شد، تصویر داخلش transform: scale(1.5) بشه.

و البته باید به تصویر هم transition: all 1s بدیم.
ذخیره و ریفرش…
عالی! تصویر خیلی قشنگ و نرم بزرگ می‌شه.

نکته‌ی مهم: چون روی parent (یعنی image-banner) ویژگی overflow: hidden گذاشتیم، تصویر وقتی بزرگ می‌شه از قاب بیرون نمی‌زنه.

حالا اگر بخوایم زوم خیلی کندتر باشه، مثلا ۳ ثانیه طول بکشه، خیلی ساده duration رو می‌ذاریم روی 3s.

عالی! هر چیزی ممکنه و این دقیقا جاییه که شما می‌تونید کلی خلاقیت به خرج بدید.

ولی هنوز یک تمرین دیگه باقی مونده.
بیاید پایین صفحه.
اینجا یک دایره داریم.

می‌خوایم وقتی موس رفت روش، دایره یک چرخش ۳۶۰ درجه انجام بده.

این عنصر کلاس box-b داره.
پس می‌ریم سراغ CSS و برای .box-b:hover می‌نویسیم: transform: rotate(360deg);

ذخیره و ریفرش…
هیچی نمی‌بینیم! چون بدون transition حرکت خیلی سریع و ناگهانی انجام می‌شه.

پس می‌نویسیم: transition: all 1s;
حالا ریفرش…
عالی! دایره نرم و زیبا یک دور کامل می‌چرخه.

اینجا یک ویژگی جدید هم بهتون معرفی کنم: transition-timing-function.
این ویژگی سرعت و شتاب انیمیشن رو کنترل می‌کنه.

• اگر بنویسیم linear → حرکت با سرعت ثابت انجام می‌شه.
• اگر بنویسیم ease-in → حرکت آهسته شروع می‌شه و بعد سریع تموم می‌شه.
• اگر بنویسیم ease-out → حرکت سریع شروع می‌شه و آهسته تموم می‌شه.
• اگر بنویسیم ease-in-out → حرکت آهسته شروع می‌شه، وسط سریع می‌شه، و دوباره آهسته تموم می‌شه.

اگر این خط رو ننویسیم، بیشتر مرورگرها به صورت پیش‌فرض از ease استفاده می‌کنن که تقریبا شبیه ease-out هست، فقط شروعش کمی سریع‌تره.

و نکته آخر: لازم نیست timing-function رو جدا بنویسیم.
می‌تونیم توی همون shorthand transition بیاریم:
مثلا: transition: all 1s ease-in-out;

خب دوستان، این درس رو جمع‌بندی کنیم:
یاد گرفتیم که ویژگی transition به ما اجازه می‌ده بین دو مقدار مختلف، همه‌ی مراحل میانی رو نرم و زیبا ببینیم.

ما بیشتر از hover استفاده کردیم چون فعلا فرضمون اینه که شما هنوز جاوااسکریپت بلد نیستید.
ولی در واقع transition برای خیلی موقعیت‌های دیگه هم کاربرد داره.

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

توی درس بعدی، می‌خوایم یه قدم جلوتر بریم و تفاوت transition و CSS animations رو بررسی کنیم.
خیلی جذاب خواهد بود!

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

امیدوارم از این درس لذت برده باشید.
می‌بینمتون توی درس بعدی 🌹✨

---

حتماً 🌹
اینجا یک مرور آموزشی و جمع‌بندی از درس «CSS Transition» برات آماده کردم، خیلی ساده و منظم:

---

🔹 جمع‌بندی درس CSS Transition

1. Transition چیست؟
   • یک ویژگی در CSS که تغییر حالت عناصر رو به‌جای ناگهانی بودن، به صورت نرم و تدریجی انجام می‌ده.
   • به کمکش می‌تونیم همه‌ی مراحل میانی بین دو مقدار مختلف رو ببینیم.
2. ویژگی‌های اصلی Transition
   • transition-property → مشخص می‌کنه روی کدوم ویژگی‌ها تغییر اعمال بشه (مثلاً color یا background-color).
   • transition-duration → مدت زمان انتقال (مثلاً 2s یعنی دو ثانیه).
   • transition-timing-function → نحوه‌ی شتاب و کاهش سرعت تغییر (linear, ease, ease-in, ease-out, ease-in-out).
   • transition-delay → تاخیر در شروع تغییر (مثلاً 1s یعنی بعد از یک ثانیه شروع بشه).

👉 نسخه کوتاه‌تر (Shorthand):

transition: all 2s ease-in-out;

3. مثال‌های عملی که دیدیم
   • تغییر نرم رنگ متن و پس‌زمینه لینک‌ها هنگام hover.
   • ظاهر شدن تدریجی کپشن روی تصویر (با حرکت translateY و تغییر opacity).
   • زوم شدن نرم تصویر هنگام hover.
   • چرخش ۳۶۰ درجه یک دایره با transition.
4. نکات مهم
   • اگر بخوایم همه ویژگی‌ها transition داشته باشن، می‌نویسیم: transition: all …
   • اگر بخوایم فقط بعضی ویژگی‌ها تغییر کنن، اون‌ها رو جدا جدا می‌نویسیم.
   • با ترکیب transform و opacity می‌تونیم افکت‌های خیلی زیبا بسازیم.
   • بیشتر مرورگرها به طور پیش‌فرض از ease استفاده می‌کنن.

---

✅ خلاصه نهایی:
ویژگی transition در CSS ابزاریه برای ایجاد افکت‌های روان و زیبا بین دو حالت مختلف.
باهاش می‌تونیم رنگ‌ها، ابعاد، شفافیت و حتی چرخش عناصر رو نرم تغییر بدیم.
این ابزار به تنهایی کلی افکت خلاقانه در اختیارمون می‌ذاره و پایه‌ایه برای درک انیمیشن‌های پیشرفته‌تر در CSS.