transition

در این فصل چه می‌سازی#

آخر این فصل یک دکمه داری که وقتی موس رویش می‌رود، نرم و آرام رنگش تیره‌تر می‌شود و کمی بزرگ می‌شود — نه با یک جهشِ ناگهانی، بلکه در طولِ چند دهمِ ثانیه. همان transform و رنگی که بلدی سرِ جایشان‌اند؛ کاری که این فصل اضافه می‌کند این است که تغییرِ بینِ دو حالت را روان کند. ابزارش یک property تازه است: transition.

آخر این فصل می‌توانی:

• با transition تغییرِ بینِ دو حالت را نرم کنی
• چهار جزءِ یک transition را نام ببری: property، duration، timing-function و delay
• هم رنگ و هم transform را با هم transition بدهی
• بگویی چرا transition باید روی قاعدهٔ پایه باشد، نه روی :hover

قبل از شروع#

• از فصل ۶ (همین ترم): transform و scale() — همان حرکت را این‌بار نرم می‌کنیم.
• از فصل ۱ (همین ترم): :hover — تغییرِ حالت را با موس راه می‌اندازیم.
• از ترم ۲: background-color و color.

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. مشکل: تغییرِ ناگهانی#

اول دکمه را بساز. HTML یک <button> ساده است:

<button type="button" class="btn">دنبال کردن</button>

و استایلِ پایه، به‌همراه یک حالتِ :hover که رنگ را تیره‌تر و دکمه را کمی بزرگ می‌کند:

.btn {
  padding: 12px 28px;
  font-size: 1rem;
  color: #ffffff;
  background-color: #2a6b93;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.btn:hover {
  background-color: #1d4d6b;
  transform: scale(1.05);
}

موس را روی دکمه ببر. رنگ تیره می‌شود و دکمه بزرگ‌تر — ولی ناگهانی، در یک چشم‌به‌هم‌زدن. این همان رفتارِ پیش‌فرضِ CSS است: هر تغییرِ حالت آنی اتفاق می‌افتد. برای حرکت‌های ظریف، این جهش خشن به‌نظر می‌رسد.

۲. اولین transition: نرم کردنِ رنگ#

transition به مرورگر می‌گوید «به‌جای اینکه این property را یک‌دفعه عوض کنی، در طولِ یک مدت آرام تغییرش بده». مهم‌ترین نکته این است که transition را روی قاعدهٔ پایه می‌گذاری (اینجا .btn)، نه روی :hover. یک transition برای background-color اضافه کن:

.btn {
  padding: 12px 28px;
  font-size: 1rem;
  color: #ffffff;
  background-color: #2a6b93;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

✅ چک کن: حالا موس را روی دکمه ببر و بردار. رنگ دیگر نمی‌پرد؛ در طولِ حدودِ یک‌سومِ ثانیه نرم تیره می‌شود، و وقتی موس را برداری همان‌قدر نرم روشن برمی‌گردد — در هر دو جهت. این نرمیِ دوطرفه کلیدِ کار است.

0.3s مدتِ تغییر است (s یعنی ثانیه). امتحانش کن: 0.3s را به 2s عوض کن تا تغییر خیلی کند و کش‌دار شود، بعد 0.05s تا تقریباً آنی شود. با چشمت رابطهٔ عدد و سرعت را ببین.

قبل از ادامه، جواب بده: اگر transition را کلاً برداری، دکمه با موس چه شکلی عوض می‌شود؟

---

جواب: ناگهانی، مثلِ بخش ۱. بدونِ transition هر تغییرِ حالت آنی است؛ transition تنها چیزی است که آن جهش را به یک حرکتِ نرم تبدیل می‌کند.

۳. چهار جزءِ یک transition#

آن خطِ transition: background-color 0.3s ease در واقع چند تنظیم را کنارِ هم دارد. یک transition تا چهار جزء می‌گیرد:

• property — کدام property نرم شود (background-color). می‌توانی all بنویسی تا همه‌چیز، ولی نام‌بردنِ دقیق بهتر است.
• duration — چقدر طول بکشد (0.3s).
• timing-function — ریتمِ حرکت (ease): تند شروع شود یا یکنواخت.
• delay — چقدر صبر کند تا شروع شود؛ اختیاری است و اگر ننویسی صفر است.

جزءِ سومی که تازه است timing-function است. ease (پیش‌فرض) کمی نرم شروع و نرم تمام می‌شود؛ linear با سرعتِ یکنواخت پیش می‌رود. امتحان کن:

.btn {
  transition: background-color 0.6s linear;
}

✅ چک کن: مدت را ۰٫۶ ثانیه گذاشتیم تا فرق بهتر دیده شود. با linear تغییر با آهنگِ یکنواخت پیش می‌رود؛ حالا linear را به ease-in-out عوض کن و ببین آرام شروع می‌شود، وسط تند می‌شود و آرام تمام. برای دیدنِ این فرق، مدت را کوتاه نگذار.

قبل از ادامه، جواب بده: اگر به‌جای نام‌بردنِ background-color، اسمِ property را all بگذاری، چه فرقی می‌کند؟

---

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

۴. یک تلهٔ رایج: transition روی جای اشتباه#

حالا یک اشتباهِ بسیار رایج. خیلی طبیعی است که فکر کنی «تغییر که وقتِ :hover اتفاق می‌افتد، پس transition را هم باید روی :hover بگذارم». بیا امتحانش کنیم — transition را از .btn بردار و روی .btn:hover بگذار:

.btn:hover {
  background-color: #1d4d6b;
  transform: scale(1.05);
  transition: background-color 0.3s ease;
}

موس را روی دکمه ببر و بردار. یک چیزِ عجیب می‌بینی: وقتی موس می‌رود روی دکمه، رنگ نرم تیره می‌شود؛ ولی وقتی موس را برمی‌داری، رنگ ناگهان می‌پرد به حالتِ اول. نرم می‌رود، تند برمی‌گردد.

🔧 اگر کار نکرد: transition فقط یک‌طرفه کار می‌کند — نرم می‌رود ولی تند برمی‌گردد؟ علتش این است که transition را روی :hover گذاشته‌ای. مرورگر همیشه به تنظیماتِ حالتِ فعلی نگاه می‌کند: وقتی موس روی دکمه است، حالتِ :hover فعال است و transitionش را می‌بیند، پس رفتن نرم است. ولی همین‌که موس را برداری، دیگر :hover فعال نیست و مرورگر به قاعدهٔ پایه نگاه می‌کند — که هیچ transition ای ندارد، پس برگشت آنی است. راهِ درست: transition را روی قاعدهٔ پایه (.btn) بگذار تا در هر دو جهت دیده شود. آن را از :hover بردار و به .btn منتقل کن.

این مهم‌ترین قاعدهٔ این فصل است: transition را همیشه روی قاعدهٔ پایه بنویس، نه روی حالتی مثل :hover. آن‌جاست که هم موقعِ رفتن و هم موقعِ برگشتن دیده می‌شود.

۵. کد کامل#

حالا نسخهٔ درست و کامل. transition روی .btn است و دو property را با هم نرم می‌کند — هم رنگ، هم transform — که با کاما از هم جدا می‌شوند. اول index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>transition</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <button type="button" class="btn">دنبال کردن</button>
  </body>
</html>

و styles.css — به خطِ transition دقت کن: دو تغییر با کاما، و هر دو روی قاعدهٔ پایه:

/* styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #f6edda;
  padding: 48px;
}

.btn {
  padding: 12px 28px;
  font-size: 1rem;
  color: #ffffff;
  background-color: #2a6b93;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
  background-color: #1d4d6b;
  transform: scale(1.05);
}

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

🤖 با AI: از دستیار AI ات بپرس «چرا transition من فقط موقعِ رفتنِ موس کار می‌کند و موقعِ برگشتن نه؟». ببین آیا همان علتِ درست را می‌گوید (transition روی :hover است نه روی پایه) یا راهِ پیچیده‌تری پیشنهاد می‌کند. جوابش را با چیزی که در بخش ۴ خودت دیدی بسنج، و در آزمایشگاه امتحان کن — اول خودت، بعد AI.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
transition	ترنزیشن	تغییرِ بینِ دو حالت را در طولِ یک مدت نرم می‌کند
duration	دیوریشن	مدتِ transition؛ با واحدِ s (ثانیه)
timing-function	تایمینگ-فانکشن	ریتمِ حرکت (ease، linear، ease-in-out)
delay	دیلِی	مکثِ اختیاری پیش از شروعِ transition

در فصل بعد#

الان می‌توانی تغییرِ بینِ دو حالت را نرم کنی — ولی transition فقط از حالتی به حالتِ دیگر می‌رود و همان‌جا می‌ایستد. فصل بعد سراغِ @keyframes و animation می‌رویم: حرکتی که خودش، بی‌نیاز به موس، پشتِ سرِ هم اجرا می‌شود و می‌تواند چند مرحله داشته باشد. و یک نکتهٔ مهم را یاد می‌گیری: چطور با prefers-reduced-motion به کسانی که حرکتِ زیاد اذیتشان می‌کند احترام بگذاری.