# ट्रांज़िशन और ट्रांसफॉर्म — CSS Fundamentals: Layout, Flexbox, Grid और Responsive Design

Source: https://www.skillbyai.com/hi/css/css-transitions-transform

> Transitions से state बदलाव animate करें और transform से elements को move, scale या rotate करें।

## transition प्रॉपर्टी

`transition: property duration timing-function` दो स्थितियों के बीच बदलाव को सहज बनाता है — जैसे सामान्य से `:hover` तक। इसके बिना, बदलाव तुरंत होते हैं।

## एक सहज होवर

बैकग्राउंड रंग तुरंत बदलने की बजाय 200ms में धीरे-धीरे बदलता है।

```css
button {
  background-color: #264de4;
  transition: background-color 200ms ease-in-out;
}

button:hover {
  background-color: #1a3aad;
}
```

## transform फ़ंक्शन

`translate(x, y)` हिलाता है, `scale(n)` आकार बदलता है, `rotate(deg)` घुमाता है — यह सब लेआउट को प्रभावित किए बिना, जो इन्हें तेज़ बनाता है।

## transform + transition का संयोजन

एक कार्ड जो होवर पर थोड़ा उठता और बड़ा होता है।

```css
.card {
  transition: transform 150ms ease-out;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
}
```