CSS transitions कसरी काम गर्छन्?

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` एनिमेट गर्न पसन्द गर्नुहोस्; तिनीहरु कम्पोजिटरद्वारा ल्यौउट दोबारा चलाइना साथ सम्भालिन्छन्, त्यसैले तिनीहरु smooth (60fps) रहन्छन्।

## पहुँचयोग्यता

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

## किन यो महत्वपूर्ण छ

Transitions ले UI लाई उत्तरदायी र जीवन्त महसुस गर्दै polish थप्छ (hover effects, smooth state changes) केवल एक लाइनसँग।

`transform`/`opacity` एनिमेट गर्न जान्ने कार्यक्षमताको लागि — र `prefers-reduced-motion` को सम्मान गर्न — जसले smooth, सुलभ motion लाई janky animation बाट अलग गर्छ।