संपत्ति 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,
जिसकी मदद से एनीमेशन बनाया जा सकता है