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

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

सिंटैक्स

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

उदाहरण

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

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

css#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 में सेट है:

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

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

Результат:

यह भी देखें