CSS ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

ਇੱਕ **transition** ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇਸਦੇ ਪੁਰਾਣੇ ਮੁੱਲ ਤੋਂ ਨਵੇਂ ਤੱਕ ਸਮੇਂ ਦੇ ਨਾਲ ਨਰਮੀ ਨਾਲ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਤੁਰੰਤ ਬਦਲਣ ਦੀ ਥਾਂ ਵਿੱਚ। ਤੁਸੀਂ *ਕੀ* ਐਨੀਮੇਟ ਕਰਨਾ ਹੈ ਅਤੇ *ਕਿੰਨਾ ਲੰਬਾ* ਘੋਸ਼ਣਾ ਕਰਦੇ ਹੋ, ਫਿਰ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਬਦਲ ਕੇ ਇਸ ਨੂੰ ਟ੍ਰਿੱਗਰ ਕਰਦੇ ਹੋ (ਅਕਸਰ `:hover` ਜਾਂ ਕਲਾਸ ਦੇ ਮਾਧਿਅਮ ਤੋਂ)।

```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`) */
```

## ਮਲਟੀਪਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ

```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 */
}
```

ਹਰ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸੂਚੀ ਬਣਾਓ (ਕੋਮੇ ਦੁਆਰਾ ਵੱਖ ਕੀਤਾ) `all` ਦੀ ਵਜਾਏ, ਜੋ ਗਲਤੀ ਨਾਲ ਅਜਿਹੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦਾ ਹੈ ਜਿਹਨਾਂ ਦਾ ਤੁਹਾਡੇ ਨੂੰ ਮਤਲਬ ਨਹੀਂ ਸੀ ਅਤੇ ਪਰਫੋਰਮੈਂਸ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾ ਸਕਦਾ ਹੈ।

## 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 */
```

## ਪਰਫੋਰਮੈਂਸ: transform/opacity ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ

```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` ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ ਪਸੰਦ ਕਰੋ; ਇਹ ਕੰਪੋਜ਼ੀਟਰ ਦੁਆਰਾ ਲੇਆਉਟ ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਏ ਬਿਨਾਂ ਸੰਭਾਲੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਇਹ ਨਿਰਵਿਘਨ (60fps) ਰਹਿੰਦੇ ਹਨ।

## ਅਯੋਗਤਾ

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

## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Transitions ਉਸ ਪਾਲਿਸ਼ ਨੂੰ ਜੋੜਦੇ ਹਨ ਜੋ UI ਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਅਤੇ ਜਿੰਦਾ ਮਹਿਸੂਸ ਕਰਾਉਂਦੀ ਹੈ (hover ਪ੍ਰਭਾਵ, ਨਿਰਵਿਘਨ ਸਥਿਤੀ ਦੀ ਤਬਦੀਲੀ) ਸਿਰਫ ਇੱਕ ਲਾਈਨ ਦੇ ਨਾਲ।

`transform`/`opacity` ਨੂੰ ਪਰਫੋਰਮੈਂਸ ਲਈ ਐਨੀਮੇਟ ਕਰਨਾ ਜਾਣਨਾ — ਅਤੇ `prefers-reduced-motion` ਦਾ ਸਨਮਾਨ ਕਰਨਾ — ਉਹ ਹੈ ਜੋ ਨਿਰਵਿਘਨ, ਪਹੁੰਚਯੋਗ ਗਤੀ ਨੂੰ janky ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਵੱਖ ਕਰਦਾ ਹੈ।