CSS Transitions

Transition باعث میشه تغییر خاصیت‌های CSS به‌صورت نرم و تدریجی انجام بشه، نه یکدفعه.

🔹 سینتکس کلی

selector {
  transition: property duration timing-function delay;
}

  • property → مشخص می‌کنه کدوم خاصیت انیمیت بشه (مثلاً color, width، یا all)

  • duration → مدت زمان (مثلاً 0.5s)

  • timing-function → سرعت تغییر (ease, linear, ease-in, ease-out, ease-in-out, یا cubic-bezier)

  • delay → تأخیر شروع

🔹 مثال ساده (تغییر رنگ دکمه با هاور)

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Transition</title>
  <style>
    .btn {
      background: coral;
      color: white;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      transition: background 0.5s ease, transform 0.3s ease;
    }
    .btn:hover {
      background: teal;
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <button class="btn">Hover Me</button>
</body>
</html>

✅ وقتی موس میره روی دکمه، رنگ و سایز با انیمیشن تغییر می‌کنن.

🔹 پراپرتی‌های مهم در Transition

1. transition-property

مشخص می‌کنه کدوم خاصیت تغییر کنه.

.box {
  transition-property: width, background;
}

2. transition-duration

مدت زمان انیمیشن.

.box {
  transition-duration: 1s;
}

3. transition-timing-function

سرعت تغییر رو کنترل می‌کنه:

  • linear → یکنواخت

  • ease → شروع و پایان نرم

  • ease-in → شروع کند، پایان سریع

  • ease-out → شروع سریع، پایان کند

  • ease-in-out → شروع و پایان کند

مثال:

.box {
  transition-timing-function: ease-in-out;
}

4. transition-delay

شروع انیمیشن رو به تأخیر میندازه.

.box {
  transition-delay: 0.5s;
}

5. transition (شورت‌هند)

همه رو توی یه خط:

.box {
  transition: all 0.5s ease-in-out 0.2s;
}

🔹 مثال کاربردی (منو با افکت Transition)

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Menu Transition</title>
  <style>
    ul li {
      list-style: none;
      padding: 10px 20px;
      background: #eee;
      margin: 5px;
      transition: background 0.4s ease, padding 0.3s;
      cursor: pointer;
    }
    ul li:hover {
      background: coral;
      padding-left: 40px;
    }
  </style>
</head>
<body>
  <ul>
    <li>خانه</li>
    <li>درباره ما</li>
    <li>تماس</li>
  </ul>
</body>
</html>

✅ وقتی موس میره روی آیتم‌های منو، پس‌زمینه و فاصله‌ها نرم تغییر می‌کنن.