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>

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