ट्रांज़िशन और ट्रांसफॉर्म

transition प्रॉपर्टी

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

एक सहज होवर

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

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 का संयोजन

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

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

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