ट्रांज़िशन प्रॉपर्टी

transition प्रॉपर्टी - स्मूथ ट्रांज़िशन के लिए शॉर्टहैंड है, जो एक साथ transition-duration, transition-property, transition-timing-function और transition-delay सेट करने की अनुमति देती है।

सिंटैक्स

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

प्रॉपर्टी के मानों के क्रम का कोई महत्व नहीं है, हालांकि कार्यान्वयन समय (transition-duration) विलंब (transition-delay) से पहले आना चाहिए।

मान

संबंधित प्रॉपर्टीज़ देखें। डिफ़ॉल्ट मान: all 0s ease 0s।

none मान सभी ट्रांज़िशन को रद्द कर देता है (वे तत्काल हो जाएंगे)।

उदाहरण

ब्लॉक पर माउस ले जाएं - 3 सेकंड कुछ नहीं होगा (³s की देरी है), और फिर यह 2 सेकंड में अपनी चौड़ाई धीरे-धीरे बदल देगा। यदि फिर माउस हटा दें - तो फिर से 3 सेकंड कुछ नहीं होगा, और फिर चौड़ाई मूल मान तक धीरे-धीरे कम हो जाएगी:

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

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

यह भी देखें