در GSAP، وقتی می‌خواهید یک المان را در طول زمان بین چند حالت مختلف انیمیت کنید، از Keyframes استفاده می‌کنیم.
Keyframes به شما امکان می‌دهد چندین موقعیت، رنگ، مقیاس یا ویژگی را در یک Tween مشخص کنید، بدون نیاز به تعریف چندین to() جداگانه یا Timeline پیچیده.

🟢 ساختار پایه Keyframes

gsap.to(".box", {
  keyframes: [
    { x: 100, duration: 1 },
    { y: 50, duration: 0.5 },
    { rotation: 360, duration: 1 },
    { x: 0, y: 0, rotation: 0, duration: 1 }
  ]
});

• هر آبجکت داخل آرایه keyframes یک حالت نهایی برای بخشی از Tween است.

• ترتیب اجرا از بالا به پایین است.

🟡 ویژگی‌های Keyframes

🟠 مثال با Ease متفاوت

gsap.to(".ball", {
  keyframes: [
    { x: 200, ease: "power1.in" },
    { y: 100, ease: "bounce.out" },
    { rotation: 180, ease: "elastic.out(1,0.3)" }
  ],
  duration: 3
});

• GSAP به طور خودکار زمان‌بندی مراحل را مدیریت می‌کند.

• هر مرحله می‌تواند Ease خاص خود داشته باشد.

🟣 Keyframes با Stagger (انیمیشن گروهی)

gsap.to(".box", {
  keyframes: [
    { y: -50, backgroundColor: "red" },
    { y: 0, backgroundColor: "blue" }
  ],
  duration: 2,
  stagger: 0.2
});

• هر المان به ترتیب با اختلاف زمان مشخص انیمیت می‌شود.

• مناسب برای چندین کارت یا دکمه که می‌خواهید انیمیشن هماهنگ داشته باشند.

🟤 Keyframes در Timeline

می‌توانید Keyframes را داخل Timeline هم استفاده کنید:

const tl = gsap.timeline();

tl.to(".box1", {
  keyframes: [
    { x: 100 },
    { y: 50 },
    { rotation: 180 }
  ],
  duration: 2
}).to(".box2", { x: 200, duration: 1 });

• راحتی و کنترل کامل روی چند المان و چند مرحله انیمیشن را فراهم می‌کند.

⚡ نکات حرفه‌ای

• می‌توانید Attribute یا CSS Variable را هم در Keyframes استفاده کنید:

gsap.to(".circle", {
  keyframes: [
    { attr: { r: 20 } },
    { attr: { r: 50 } }
  ],
  duration: 2
});

• برای انیمیشن‌های رنگی یا متن هم Keyframes مناسب است.

✅ جمع‌بندی

Keyframes باعث می‌شود بدون Timeline پیچیده، انیمیشن‌های چند مرحله‌ای و روان بسازید.