Transition CSS Basics: Smooth Animations for Beginners

Transition CSS क्या होता है?

अरे यार, कभी ध्यान दिया है जब किसी बटन पर माउस ले जाते हैं और वो धीरे-धीरे कलर बदलता है? या फिर कोई इमेज होवर पर ज़ूम होती है? ये सब मैजिक CSS की मदद से होता है खासतौर पर transition css से। अगर तुम वेब डिज़ाइन या फ्रंटएंड डेवलपमेंट सीख रहे हो, तो transition css तुम्हारे टूलबॉक्स का एक ज़रूरी हिस्सा होना चाहिए। इस आर्टिकल में हम बात करेंगे कि transition css क्या है, कैसे काम करता है, और कैसे तुम इसे अपनी वेबसाइट में जोड़ सकते हो — वो भी आसान भाषा में।

Transition CSS क्या है?

Transition CSS एक ऐसा तरीका है जिससे आप किसी HTML एलिमेंट में smooth बदलाव (animations) ला सकते हो। यानि जब कोई स्टाइल बदलती है — जैसे color, size, या position — तो वो झटके से ना होकर smoothly change होती है। उदाहरण के लिए:

button {
background-color: blue;
transition: background-color 0.5s ease;
}

button:hover {
background-color: green;
}

ऊपर दिए कोड में जैसे ही यूज़र बटन पर माउस लाएगा, बैकग्राउंड कलर धीरे-धीरे नीले से हरे में बदल जाएगा एकदम स्मूद अंदाज़ में।

Transition CSS के Important Properties

जब भी transition css लगाते हैं, तो हमें कुछ properties को समझना ज़रूरी होता है:

transition-property: कौन सी CSS प्रॉपर्टी पर ट्रांजिशन चाहिए? (जैसे color, background-color, width आदि)
transition-duration: ट्रांजिशन को पूरा होने में कितना समय लगेगा? (जैसे 0.3s, 1s)
transition-timing-function: बदलाव किस तरीके से हो? (जैसे ease, linear, ease-in, ease-out)
transition-delay: ट्रांजिशन शुरू होने में कितना delay हो? (0s, 1s, आदि)

एक shorthand तरीका भी होता है:

Syntax: transition: property duration timing-function delay;

Example- transition: all 0.4s ease-in-out 0s;

Transition CSS का Practical Example

Html:

Css:

.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.5s ease;
}

.box:hover {
width: 150px;
height: 150px;
background-color: blue;
}

अब जैसे ही कोई माउस उस बॉक्स पर लाएगा, वो धीरे-धीरे बड़ा होगा और कलर भी बदल जाएगा।

Transition CSS को कब और क्यों इस्तेमाल करें?

Transition सिर्फ उन्हीं properties पर काम करता है जिनका इंटरपोलेशन possible हो, जैसे color, background-color, width, opacity आदि। ये display: none पर work नहीं करता।
अगर duration बहुत ज़्यादा कर दी, तो UX खराब हो सकता है। Ideal duration: 0.2s – 0.5s.
ज़्यादा transitions यूज़र को distract कर सकते हैं, balance ज़रूरी है।

Transition vs Animation – फर्क क्या है?

Feature	Transition CSS	Animation CSS
Trigger	किसी interaction (hover, focus) पर	Automatically चलती है
Control Level	Limited	ज़्यादा Flexible
Use Case	छोटे hover effects	Complex animations