🧩 ویژگی‌های اصلی Animation:

• animation-name → نام انیمیشنی که با @keyframes تعریف شده.
• animation-duration → مدت زمان اجرای انیمیشن (مثلاً 2s یا 500ms).
• animation-delay → تاخیر قبل از شروع انیمیشن.
• animation-iteration-count → تعداد دفعات تکرار انیمیشن (1، 3 یا infinite).
• animation-direction → جهت اجرای انیمیشن:
  • normal (پیش‌فرض)
  • reverse
  • alternate (رفت و برگشتی)
  • alternate-reverse
• animation-fill-mode → تعیین وضعیت عنصر قبل یا بعد از انیمیشن:
  • none – بدون تغییر
  • forwards – حفظ حالت نهایی
  • backwards – نمایش حالت ابتدایی
  • both – هر دو حالت
• animation-play-state → کنترل پخش یا توقف انیمیشن (running یا paused)
• animation-timing-function → نحوه سرعت تغییرات (مثل linear, ease, ease-in, ease-out, ease-in-out یا حتی مقادیر خاص مثل تابع linear() برای کنترل دقیق‌تر حرکت).

✳️ نکات مهم:

• می‌تونیم چندین ویژگی انیمیشن رو در یک خط بنویسیم:

   

  animation: change 2s linear 2s infinite normal forwards;
  

  ترتیب مقادیر:

   

  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  

• برای متحرک‌سازی چندین ویژگی (مثل رنگ، اندازه، موقعیت و...) فقط کافیه در @keyframes مقدار اون‌ها رو در مراحل مختلف تغییر بدیم.