CSS transitions कैसे काम करते हैं?

Question

Accepted Answer

एक **transition** एक संपत्ति को तुरंत बदलने के बजाय, समय के साथ अपने पुराने मान से नए मान में सुचारू रूप से animate करता है। आप घोषणा करते हैं कि *क्या* animate करना है और *कितना समय*, फिर संपत्ति को बदलकर इसे ट्रिगर करते हैं (अक्सर `: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`) */
```

## कई संपत्तियों को 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 */
}
```

प्रत्येक संपत्ति को सूचीबद्ध करें (अल्पविराम से अलग) `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 करना पसंद करें; वे layout को फिर से चलाए बिना compositor द्वारा संभाले जाते हैं, इसलिए वे smooth रहते हैं (60fps)।

## Accessibility

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

## यह क्यों महत्वपूर्ण है

Transitions उस polish को जोड़ते हैं जो UI को responsive और alive महसूस कराता है (hover effects, smooth state changes) मात्र एक line के साथ।

Performance के लिए `transform`/`opacity` को animate करना जानना — और `prefers-reduced-motion` का सम्मान करना — वह है जो smooth, accessible motion को janky animation से अलग करता है।