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

Question

Accepted Answer

ایک **transition** کسی property کو اس کی پرانی قیمت سے نئی قیمت میں فوری طور پر تبدیل کرنے کی بجائے وقت کے ساتھ سمتھ طریقے سے animate کرتا ہے۔ آپ *کیا* animate کرنا ہے اور *کتنا وقت* لگے گا یہ بتاتے ہیں، پھر اسے trigger کرتے ہیں property کو بدل کر (عام طور پر `:hover` یا کسی class کے ذریعے)۔

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## shorthand کے چار حصے

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## متعدد properties کو animate کرنا

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

ہر property کو (comma-separated) list کریں بجائے `all` استعمال کرنے کے، جو غیر ارادی طور پر ایسی چیزوں کو animate کر سکتا ہے جن کا آپ نے ارادہ نہیں کیا اور performance کو نقصان پہنچا سکتا ہے۔

## Timing functions

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## Performance: transform/opacity کو animate کریں

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

`transform` اور `opacity` کو animate کرنا ترجیح دیں؛ یہ compositor کے ذریعے handle ہوتے ہیں بغیر layout دوبارہ چلائے، تو وہ سمتھ رہتے ہیں (60fps)۔

## رسائی پذیری

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

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

Transitions اس پالش کو شامل کرتے ہیں جو UI کو responsive اور زندہ محسوس کراتی ہے (hover effects، سمتھ state changes) محض ایک لائن سے۔

یہ جاننا کہ `transform`/`opacity` کو performance کے لیے animate کرنا ہے — اور `prefers-reduced-motion` کو احترام کرنا ہے — یہی وہ چیز ہے جو سمتھ، رسائی پذیر motion کو janky animation سے الگ کرتی ہے۔