فصل دوازدهم: آشنایی ساده با انتقال (Transition) و انیمیشن (Animation) در CSS

وقتی می‌خواهیم عناصر سایتمان زیباتر و حرفه‌ای‌تر باشند، معمولاً دلمان می‌خواهد تغییرات به شکل ناگهانی دیده نشوند، بلکه “نرم” و آرام اتفاق بیفتند.
دو ابزار ساده در CSS داریم:
۱. انتقال یا ترنزیشن (Transition)
۲. انیمیشن (Animation)

---

بخش اول: انتقال (Transition)

معنی Transition؟

خیلی ساده: اگر روی یک دکمه هاور کنی و رنگش عوض شود، به جای اینکه رنگ به طور ناگهانی تغییر کند، ‌آن را آرام آرام عوض می‌کنیم.

چگونه استفاده کنیم؟

فرض کن یک دکمه داری:

<button class="my-btn">روی من بیا!</button>

حالا در CSS:

.my-btn {
  background: #2196f3;      /* رنگ آبی */
  color: white;
  padding: 12px 26px;
  border-radius: 8px;
  transition: background 0.5s;  /* هر تغییری در background، نیم‌ثانیه طول می‌کشد */
}
.my-btn:hover {
  background: #ff5722;        /* رنگ نارنجی */
}

معنی این کد چیست؟

• روی دکمه که بروی، رنگ آرام آرام از آبی به نارنجی تغییر می‌کند و نه به صورت ناگهانی!
• مقدار 0.5s یعنی این تغییر نصف ثانیه طول می‌کشد.

چرا transition جالب است؟

• فقط با یک خط کد، تغییرات نرم و زیبا می‌شوند.
• می‌توان طیف گسترده‌ای از ویژگی‌ها (رنگ، اندازه، سایه و…) را نرم کرد.

---

چند ویژگی مهم transition

• transition-property: روی چه ویژگی تأثیر بگذارد (مثلاً background)
• transition-duration: زمان تغییر (مثلاً 1s یا 400ms)
• transition-timing-function: حالت تغییر (مثلاً ease، linear و …)
• transition-delay: تأخیر در شروع

مثال حرفه‌ای‌تر:

.my-btn {
  transition: all 0.4s ease; /* همه ویژگی‌ها به مدت 0.4 ثانیه به ‌صورت نرم تغییر کنند */
}

---

تمرین ساده Transition

۱. یک عکس بساز که وقتی موس رویش می‌آید، کم‌رنگ یا بزرگ شود.

img:hover {
  opacity: 0.7;
  transform: scale(1.08);
  transition: opacity 0.3s, transform 0.3s;
}

---

بخش دوم: انیمیشن (Animation)

معنی Animation؟

اگر می‌خواهی یک عنصر مثلاً از چپ حرکت کند یا چند حالت پشت سر هم بگیرد، باید از animation استفاده کنی.

ساده‌ترین حالت

۱. اول صحنه‌های تغییر (keyframes) را تعریف می‌کنی.
۲. بعد به عنصرت می‌گویی این انیمیشن را اجرا کن.

مثال ساده:

فرض کن می‌خواهی یک جعبه آرام از چپ به راست برود:

<div class="box"></div>

.box {
  width: 70px; height: 70px;
  background: #4caf50;
  position: relative;
  animation: moveBox 2s;
}

@keyframes moveBox {
  from { left: 0; }
  to   { left: 180px; }
}

معنی این کد چیست؟

• جعبه (div) آرام در مدت ۲ ثانیه از چپ به راست حرکت می‌کند.

---

پارامترهای مهم animation:

• animation-name: اسم انیمیشن (moveBox)
• animation-duration: چند ثانیه طول بکشد؟
• animation-iteration-count: چند بار تکرار شود؟
• animation-delay: چقدر بعد از ظاهر شدن شروع شود؟
• animation-direction: رفت و برگشتی یا یک‌طرفه؟

مثلاً:

animation: moveBox 2s 1s 3 alternate;

یعنی: ۲ ثانیه طول بکشد، با ۱ ثانیه تاخیر، ۳ بار رفت و برگشتی اجرا شود.

---

تمرین ساده Animation

یک دایره بساز که به آرامی بزرگ و کوچک شود:

<div class="circle"></div>

.circle {
  width: 60px; height: 60px;
  background: #f44336;
  border-radius: 50%;
  animation: pulse 1s infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1);}
  to   { transform: scale(1.3);}
}

• infinite یعنی همیشه تکرار شود.
• alternate یعنی برعکس هم اجرا شود (بزرگ ← کوچک ← بزرگ…)

---

جمع‌بندی سریع و ساده:

• اگر فقط می‌خواهی یک ویژگی هنگام تغییر (مثلاً هاور) نرمال و نرم تغییر کند: transition.
• اگر می‌خواهی یک انیمیشن چند-مرحله‌ای یا پشت سرهم (مثل حرکت، تکان خوردن، جهش و …) داشته باشی: animation و keyframes.

---

تمرین پایانی

۱. یک دکمه درست کن که وقتی موس رویش می‌روی، هم رنگش عوض شود (transition) و هم کمی تکان بخورد (animation مثال shake پایین).
۲. هر عنصری خواستی را با @keyframes کمی حرکت بده (مثلاً یک تصویر را چپ‌راست کن).