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

transitionसंपत्ति एक आशुलिपि चार संक्रमण से संबंधित पूरे अक्षरों में लिखावट गुण अप करने के लिए का प्रतिनिधित्व करते थे संपत्ति है:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

ये संक्रमण गुण तत्वों को एक निर्दिष्ट अवधि में मूल्यों को बदलने की अनुमति देते हैं, संपत्ति परिवर्तनों को एनिमेट करते हैं, बजाय उन्हें तुरंत होने के। यहाँ एक सरल उदाहरण है कि एक तत्व की पृष्ठभूमि का रंग संक्रमण है : होवर:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

जब लाल से हरे रंग की ओर मुड़ने के लिए माउस खत्म हो जाता है, तो यह विभाजन आधा सेकंड का समय लेगा। इस तरह के एक संक्रमण का एक लाइव प्रदर्शन है:

कोड लेन पर लुईस लैजरिस (@impressivewebs) द्वारा पेन ट्रांजिशन डेमो देखें।

आप एक विशेष संपत्ति निर्दिष्ट कर सकते हैं जैसा कि हमारे पास है, या संक्रमण गुणों को संदर्भित करने के लिए "सभी" के मूल्य का उपयोग करें।

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

इस उपरोक्त उदाहरण में, transition-propertyशॉर्टहैंड के हिस्से के लिए निर्दिष्ट मूल्य "सभी" के कारण पृष्ठभूमि और पैडिंग दोनों संक्रमण करेंगे ।

आप अलग-अलग गुणों पर अलग-अलग संक्रमण करने के लिए अलग-अलग मान सेट कर सकते हैं:

div ( transition: background 0.2s ease, padding 0.8s linear; )

अधिकांश भाग के लिए, मूल्यों का क्रम मायने नहीं रखता है - जब तक कि एक देरी निर्दिष्ट नहीं होती है। यदि आप एक देरी निर्दिष्ट करते हैं, तो आपको पहले एक अवधि निर्दिष्ट करनी होगी। पहला मान जो ब्राउज़र मान्य समय मान के रूप में पहचानता है वह हमेशा अवधि का प्रतिनिधित्व करेगा। विलंब के रूप में किसी भी बाद के वैध समय मूल्य को पार्स किया जाएगा।

कुछ गुणों को परिवर्तित नहीं किया जा सकता है क्योंकि वे एनिमेटेबल गुण नहीं हैं। पूरी सूची के लिए कल्पना देखें कि कौन से गुण एनिमेटेबल हैं।

तत्व पर संक्रमण को निर्दिष्ट करके, आप दोनों दिशाओं में होने वाले संक्रमण को परिभाषित करते हैं। यही है, जब शैलियों को बदल दिया जाता है (जैसे होवर ऑन), तो वे गुण संक्रमण करेंगे, और जब शैली वापस बदलती हैं (उदाहरण के लिए होवर बंद) तो वे संक्रमण करेंगे। उदाहरण के लिए, होवर पर निम्न डेमो बदलाव, लेकिन हॉवर बंद नहीं:

कोड जेन पर लुई लजारिस (@impressivewebs) द्वारा पेन ज़ोहट देखें।

ऐसा इसलिए होता है क्योंकि संक्रमण को :hoverराज्य चयनकर्ता में स्थानांतरित कर दिया गया है और चयनकर्ता पर कोई मिलान संक्रमण नहीं है जो तत्व को सीधे :hoverराज्य के बिना लक्षित करता है।

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

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

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

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

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

डेस्कटॉप

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

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

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