transition-property प्रॉपर्टी

transition-property प्रॉपर्टी उस प्रॉपर्टी को सेट करती है जो transition के सहज परिवर्तन द्वारा एनिमेटेड होगी। मान के रूप में उस CSS प्रॉपर्टी का नाम पास करना चाहिए जो एनिमेटेड होगी। यदि मान all सेट किया जाए (यह डिफ़ॉल्ट रूप से सेट है) - तो सभी प्रॉपर्टीज़ एक साथ एनिमेटेड होंगी।

सिंटैक्स

सिलेक्टर {
	transition-property: मान;
}

उदाहरण

ब्लॉक पर माउस ले जाएं - यह अपनी चौड़ाई धीरे-धीरे बदलेगा, क्योंकि transition-property का मान width है:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

उदाहरण . all मान

इस उदाहरण में transition-property का मान all है - इसलिए hover अवस्था के लिए लिखी गई सभी प्रॉपर्टीज़ (हमारे मामले में width और height) धीरे-धीरे बदलेंगी। सभी परिवर्तन उसी समय में होंगे जो transition-duration में सेट है:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

यह भी देखें

transition-duration प्रॉपर्टी,
जो सहज परिवर्तन की अवधि सेट करती है
transition-delay प्रॉपर्टी,
जो सहज परिवर्तन से पहले देरी सेट करती है
transition-timing-function प्रॉपर्टी,
जो सहज परिवर्तन के लिए टाइमिंग फ़ंक्शन सेट करती है
transition प्रॉपर्टी,
जो सहज परिवर्तन के लिए शॉर्टहैंड है
animation प्रॉपर्टी,
जिसकी मदद से एनीमेशन बनाया जा सकता है