CSS ट्रांसिशन प्रक्रिया

परिभाषा और उपयोग

transition गुण एक संक्षिप्त गुण है, जो चार पारस्परिक गुणों को सेट करने के लिए प्रयोग किया जाता है:

टिप्पणीःहमेशा सेट करें transition-duration गुण को नहीं सेट करने पर, यदि अवधि 0 है, तो पारस्परिक प्रभाव नहीं होगा।

अन्य संदर्भः

CSS शिक्षाःCSS ट्रांसिशन

HTML DOM संदर्भ दस्तावेज़ःtransition गुण

उदाहरण

डिव एलिमेंट पर माउस पॉइंटर रखें, तो इसकी चौड़ाई 100px से धीरे-धीरे 300px बढ़ जाएगी:

div {
  width: 100px;
  transition: width 2s;
}

अपने आप साफ़ी करें

CSS व्याकरण

transition: गुण अवधि रेखाचित्र देरी;

गुण मूल्य

मूल्य वर्णन
transition-property पारस्परिक प्रभाव के लिए सेट करने के लिए CSS गुण का नाम निर्धारित करता है。
transition-duration पारस्परिक प्रभाव के लिए कितने सेकंड या मिलीसेकंड की जरूरत है इसे निर्धारित करता है。
transition-timing-function गति प्रभाव की गति का रेखाचित्र निर्धारित करता है。
transition-delay पारस्परिक प्रभाव कब शुरू होना है इसे परिभाषित करता है。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यूः all 0 ease 0
विरासतीयताः नहीं
संस्करणः CSS3
JavaScript व्याकरणः object.style.transition="width 2s"

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

तालिका में नंबर इस गुण का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण को निर्दिष्ट करते हैं।

इससे -webkit-、-moz- या -o- के साथ नंबर अग्रसूत्र का पहला संस्करण का उपयोग करने के लिए है।

च्रोम IE / एज फ़ायरफॉक्स सैफारी ओपेरा
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-