# ट्रांज़िशन और ट्रांसफॉर्म — सीएसएस

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

> प्रॉपर्टी बदलाव को सहजता से एनिमेट करें, और बॉक्स को हिलाएँ/बड़ा-छोटा करें/घुमाएँ।

## 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);
}
```