संपत्ति transition-delay

संपत्ति transition-delay transition के सहज संक्रमण शुरू होने से पहले देरी सेट करती है।

वाक्य - विन्यास

चयनकर्ता {
	transition-delay: s या ms में समय;
}

मान

मान	विवरण
`s`	सेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए `3s`)। आंशिक मान निर्दिष्ट किए जा सकते हैं, उदाहरण के लिए, `0.5s` - आधा सेकंड।
`ms`	मिलीसेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए `3ms`)। एक सेकंड `1000` मिलीसेकंड होता है।

डिफ़ॉल्ट मान: 0s।

उदाहरण

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

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

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

उदाहरण

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

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

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

यह भी देखें

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