शैली संक्रमण संपत्ति
उदाहरण
धीरे-धीरे अपनी उपस्थिति बदलने के लिए एक div तत्व पर होवर करें:
document.getElementById("myDIV").style.transition = "all 2s";
परिभाषा और उपयोग
ट्रांज़िशन प्रॉपर्टी चार ट्रांज़िशन प्रॉपर्टी के लिए शॉर्टहैंड प्रॉपर्टी है:
ट्रांज़िशनप्रॉपर्टी, ट्रांज़िशन अवधि, ट्रांज़िशनटाइमिंग फंक्शन, और ट्रांज़िशनडेले।
नोट: हमेशा ट्रांज़िशनDuration प्रॉपर्टी निर्दिष्ट करें, अन्यथा अवधि 0 है, और ट्रांज़िशन का कोई प्रभाव नहीं पड़ेगा।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
वाक्य - विन्यास
संक्रमण संपत्ति लौटाएं:
object.style.transition
संक्रमण संपत्ति सेट करें:
object.style.transition = "property duration timing-function delay|initial|inherit"
सम्पत्ति की कीमत
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
टेक्निकल डिटेल
डिफ़ॉल्ट मान: | सभी 0 आराम 0 |
---|---|
प्रतिलाभ की मात्रा: | एक स्ट्रिंग, एक तत्व की संक्रमण संपत्ति का प्रतिनिधित्व करता है |
सीएसएस संस्करण | CSS3 |
संबंधित पृष्ठ
सीएसएस संदर्भ: संक्रमण संपत्ति
❮ स्टाइल ऑब्जेक्ट