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` એનિમેટ કરવાને પ્રાધાન્ય આપો; તેઓ layout ને ફરીથી ચલાવ્યા વિના compositor દ્વારા સંચાલિત થાય છે, તેથી તેઓ સરળ રહે છે (60fps).

## સુલભતા

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

## તે શા માટે મહત્વપૂર્ણ છે

સંક્રમણો તે પોલીશ ઉમેરે છે જે UI ને પ્રતિક્રિયાશીલ અને જીવંત (hover effects, સરળ સ્થિતિ પરિવર્તનો) કરે છે માત્ર એક લાઇન સાથે.

`transform`/`opacity` એનિમેટ કરવાનું જાણવું કામગીરી માટે — અને `prefers-reduced-motion` ને સન્માન આપવું — તે છે જે સરળ, સુલભ ગતિને janky એનિમેશન થી અલગ કરે છે.