🔹 ۱. خاصیت transition

• خاصیت کلی برای تعریف انیمیشن انتقال بین دو حالت.

• می‌تواند تمام ویژگی‌های زیر را در یک خط ترکیب کند:

   

  transition: property duration timing-function delay;

🔹 ۲. transition-property

• مشخص می‌کند کدام ویژگی CSS باید تغییرش به‌صورت انیمیشنی انجام شود.

   

  transition-property: background-color, transform;
  

🔹 ۳. transition-duration

• مدت‌زمان انجام انتقال را تعیین می‌کند.
• می‌توان چند زمان را برای ویژگی‌های مختلف تعیین کرد.

🔹 ۴. transition-delay

• مشخص می‌کند انیمیشن پس از چه مدتی شروع شود.

🔹 ۵. transition-timing-function

• نوع سرعت یا منحنی حرکت انتقال را مشخص می‌کند.
  • linear: سرعت ثابت
  • ease: شروع کند → سریع → پایان کند (پیش‌فرض)
  • ease-in: شروع کند
  • ease-out: پایان کند
  • ease-in-out: شروع و پایان کند
  • cubic-bezier(n,n,n,n): تابع سفارشی

🔹 نکته تکمیلی

• می‌توان چند ویژگی را هم‌زمان انیمیت کرد:

   

  transition: background 0.5s ease, transform 0.7s ease-in;
  

• برای حذف ناگهانی انیمیشن، از مقدار none استفاده می‌شود:

   

  transition: none;