CSS Transitions
Transition باعث میشه تغییر خاصیتهای CSS بهصورت نرم و تدریجی انجام بشه، نه یکدفعه.
🔹 سینتکس کلی
-
property → مشخص میکنه کدوم خاصیت انیمیت بشه (مثلاً
color
,width
، یاall
) -
duration → مدت زمان (مثلاً
0.5s
) -
timing-function → سرعت تغییر (
ease
,linear
,ease-in
,ease-out
,ease-in-out
, یا cubic-bezier) -
delay → تأخیر شروع
🔹 مثال ساده (تغییر رنگ دکمه با هاور)
✅ وقتی موس میره روی دکمه، رنگ و سایز با انیمیشن تغییر میکنن.
🔹 پراپرتیهای مهم در Transition
1. transition-property
مشخص میکنه کدوم خاصیت تغییر کنه.
2. transition-duration
مدت زمان انیمیشن.
3. transition-timing-function
سرعت تغییر رو کنترل میکنه:
-
linear
→ یکنواخت -
ease
→ شروع و پایان نرم -
ease-in
→ شروع کند، پایان سریع -
ease-out
→ شروع سریع، پایان کند -
ease-in-out
→ شروع و پایان کند
مثال:
4. transition-delay
شروع انیمیشن رو به تأخیر میندازه.
5. transition
(شورتهند)
همه رو توی یه خط:
🔹 مثال کاربردی (منو با افکت Transition)
✅ وقتی موس میره روی آیتمهای منو، پسزمینه و فاصلهها نرم تغییر میکنن.