ट्रांज़िशन प्रॉपर्टी
transition प्रॉपर्टी - स्मूथ ट्रांज़िशन के लिए
शॉर्टहैंड है, जो एक साथ
transition-duration,
transition-property,
transition-timing-function
और transition-delay
सेट करने की अनुमति देती है।
सिंटैक्स
सेलेक्टर {
transition: मान;
}
प्रॉपर्टी के मानों के क्रम का कोई महत्व नहीं है, हालांकि
कार्यान्वयन समय (transition-duration)
विलंब (transition-delay) से पहले आना चाहिए।
मान
संबंधित प्रॉपर्टीज़ देखें। डिफ़ॉल्ट मान:
all 0s ease 0s।
none मान सभी ट्रांज़िशन को रद्द कर देता है
(वे तत्काल हो जाएंगे)।
उदाहरण
ब्लॉक पर माउस ले जाएं - 3 सेकंड
कुछ नहीं होगा (³s की देरी है),
और फिर यह 2 सेकंड में अपनी चौड़ाई
धीरे-धीरे बदल देगा। यदि फिर माउस हटा दें
- तो फिर से 3 सेकंड कुछ नहीं होगा,
और फिर चौड़ाई मूल मान तक धीरे-धीरे कम हो जाएगी:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
यह भी देखें
-
animationप्रॉपर्टी,
जिसकी मदद से एनीमेशन बना सकते हैं
