सीएसएस संक्रमण संपत्ति
उदाहरण
चौड़ाई को धीरे-धीरे 100px से 300px में बदलने के लिए <div> तत्व पर होवर करें:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति के transition
लिए एक आशुलिपि संपत्ति है:
नोट: हमेशा संक्रमण-अवधि गुण निर्दिष्ट करें , अन्यथा अवधि 0s है, और संक्रमण का कोई प्रभाव नहीं पड़ेगा।
डिफ़ॉल्ट मान: | सभी 0s आसानी 0s |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.transition="all 2s" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट-, -मोज़- या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
सीएसएस सिंटेक्स
transition: property duration timing-function delay|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | 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 |
और ज्यादा उदाहरण
उदाहरण
जब एक <इनपुट प्रकार = "टेक्स्ट"> फोकस हो जाता है, तो धीरे-धीरे चौड़ाई को 100px से 250px में बदलें:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ट्रांजिशन
एचटीएमएल डोम संदर्भ: संक्रमण संपत्ति