संक्रमण-देरी - सीएसएस-ट्रिक्स

transition-delayसंपत्ति, सामान्य रूप से के हिस्से के रूप में इस्तेमाल किया transitionआशुलिपि, एक संक्रमण की शुरुआत में देरी करने के समय की लंबाई को परिभाषित करने के लिए किया जाता है।

.delay-me ( transition-delay: 0.25s; )

मान निम्न में से एक हो सकता है:

• सेकंड या मिलीसेकंड में मान्य मान्य मान जैसे 1.3sया125ms
• समय मानों की एक अल्पविराम से अलग सूची, एक तत्व के लिए कई संक्रमणों पर अलग-अलग विलंब मानों को परिभाषित करने के लिए 1s background-color, 350ms transform

के लिए डिफ़ॉल्ट मान transition-delayहै 0s, जिसका अर्थ है कि कोई देरी नहीं होगी और संक्रमण तुरंत होने लगेगा। समय मान को अधिक सटीक समय के लिए दशमलव-आधारित संख्या के रूप में व्यक्त किया जा सकता है।

जब एक संक्रमण में विलंब मूल्य होता है जो नकारात्मक होता है, तो यह संक्रमण को तुरंत (बिना देरी के) शुरू करने का कारण होगा, हालांकि, संक्रमण प्रक्रिया के माध्यम से भाग शुरू कर देगा, जैसे कि यह पहले ही शुरू हो गया था।

निम्नलिखित पेन एक बॉक्स पर एक हॉवर प्रभाव दिखाता है जो एक संक्रमण अवधि के साथ transition-delayमूल्य का उपयोग करता है :2s1s

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन ट्रांजिशन देरी डेमो देखें
।

अब इसकी तुलना निम्नलिखित डेमो से करें, जिसमें देरी -1sऔर इसकी अवधि है 3s:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन निगेटिव
ट्रांजैक्शन देरी डेमो देखें ।

ध्यान दें कि दूसरे उदाहरण में, केवल अंतिम दो-तिहाई वास्तविक संक्रमण दिखाई देता है और इसमें देरी नहीं होती है। ऋणात्मक मान देरी को हटाता है और प्रभावी रूप से अवधि में कटौती करता है।

सभी सहायक ब्राउज़रों में अनुकूलता के लिए, विक्रेता उपसर्गों की आवश्यकता होती है, अंतिम रूप से घोषित मानक सिंटैक्स के साथ:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (समर्थन करने के लिए IE का पहला स्थिर संस्करण transition-delay) -ms-उपसर्ग की आवश्यकता नहीं है ।

एक सामान्य उपयोग मामला संक्रमणों को बढ़ा रहा है:

कोडपेन
पर क्रिस कॉयियर (@chriscoyier) द्वारा पेन कंपित एनिमेशन देखें ।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
4 *	5 *	१०	१२	5.1 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	२.१ *	6.0-6.1 *