CSS keyframe animations کیسے کام کرتے ہیں؟

Question

Accepted Answer

جبکہ transitions دو states کے درمیان animate کرتے ہیں، **`@keyframes` animations** ایک multi-step sequence کو متعارف کراتے ہیں جو خود بخود چل سکتا ہے، loop کر سکتا ہے، اور بہت سی intermediate states کے ذریعے حرکت کر سکتا ہے۔

## Animation کو define اور apply کرنا

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## Multi-step keyframes with percentages

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

Percentages آپ کو ایک animation میں کئی stages کو choreograph کرنے دیتے ہیں — سادہ transition کے ساتھ ممکن نہیں۔

## مکمل animation shorthand

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

دوسری خصوصیات: `animation-delay`، `animation-direction: alternate` (ping-pong)، `animation-fill-mode: forwards` (آخری state کو رکھیں)، `animation-play-state: paused`۔

## کارکردگی — صرف transform/opacity کو animate کریں

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

Keyframe animations ہر frame پر چلتے ہیں، تو layout-triggering خصوصیات کو animate کرنا `transform`/`opacity` کو animate کرنے سے بہت زیادہ مہنگا ہے۔

## رسائی (Accessibility)

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## یہ کیوں اہم ہے

Keyframe animations loaders، attention cues، entrances، اور looping effects کو طاقت دیتے ہیں جو transitions ظاہر نہیں کر سکتے (multi-step، auto-running، infinite)۔

Shorthand کو جاننا، smoothness کے لیے `transform`/`opacity` پر عمل کرنا، اور `prefers-reduced-motion` کا احترام کرنا آپ کو rich motion بنانے دیتا ہے جو کارکردگی اور رسائی کو برقرار رکھتا ہے۔