CSS => संक्रमण

वाक्य - विन्यास

संक्रमण: [संक्रमण-गुण] [संक्रमण-अवधि] [संक्रमण-समय-कार्य] [संक्रमण-देरी];

पैरामीटर

पैरामीटर	विवरण
संक्रमण-संपत्ति	विशिष्ट सीएसएस संपत्ति जिसका मूल्य परिवर्तन की जरूरत तरीके से संक्रमित करने के लिए (या) `all` , सभी अगर transitionable गुण परिवर्तित होने की जरूरत है।
अवस्थांतर अवधि	अवधि (या की अवधि) सेकंड (में `s` ) या मिलीसेकंड ( `ms` ) जिस पर संक्रमण जगह ले जाना चाहिए।
संक्रमण-समय-समारोह	एक फ़ंक्शन जो यह बताता है कि संक्रमण के दौरान मध्यवर्ती मूल्यों की गणना कैसे की जाती है। आमतौर पर उपयोग किए जाने वाले मूल्य `ease` , `ease` , `ease-in` , `ease-out` , `ease-in-out` , `linear` , `cubic-bezier()` , `steps()` । विभिन्न समय कार्यों के बारे में अधिक जानकारी W3C चश्मा में पाई जा सकती है।
संक्रमण-विलंब	संक्रमण शुरू होने से पहले कितना समय बीत चुका होगा। सेकंड (में निर्दिष्ट किया जा सकता `s` ) या मिलीसेकंड ( `ms` )

टिप्पणियों

कुछ पुराने ब्राउज़र केवल वेंडर-प्रीफ़िक्स किए गए transition गुणों का समर्थन करते हैं:

-webkit : iOS के लिए क्रोम 25-, सफारी 6-, सफारी और क्रोम 6.1-, एंड्रॉइड 4.3- ब्राउज़र, ब्लैकबेरी ब्राउज़र 7-, यूसी ब्राउज़र 9.9- एंड्रॉइड के लिए।
-moz : फ़ायरफ़ॉक्स 15-।
-o : ओपेरा 11.5-, ओपेरा मोबाइल 12-।

उदाहरण:

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

संक्रमण शॉर्टहैंड

सीएसएस

div{
    width: 150px;
    height:150px;
    background-color: red;
    transition: background-color 1s;
}
div:hover{
    background-color: green;
}

एचटीएमएल

<div></div>

यह उदाहरण पृष्ठभूमि रंग को बदल देगा जब div को मँडराया जाएगा पृष्ठभूमि-रंग परिवर्तन 1 सेकंड तक चलेगा।

संक्रमण (लंबे समय तक)

सीएसएस

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition-property: height, width;
  transition-duration: 1s, 500ms;
  transition-timing-function: linear;
  transition-delay: 0s, 1s;
}
div:hover {
  height: 200px;
  width: 200px;
}

एचटीएमएल

<div></div>

संक्रमण-गुण : CSS गुण निर्दिष्ट करता है जो संक्रमण प्रभाव के लिए है। इस मामले में, मंडरा क्षैतिज और लंबवत रूप से विस्तारित होगा जब हॉवर किया जाएगा।
संक्रमण-अवधि : किसी संक्रमण को पूरा होने में लगने वाले समय को निर्दिष्ट करता है। उपरोक्त उदाहरण में, ऊंचाई और चौड़ाई के संक्रमण क्रमशः 1 सेकंड और 500 मिलीसेकंड लेंगे।
संक्रमण-समय-समारोह : संक्रमण प्रभाव की गति वक्र को निर्दिष्ट करता है। एक रेखीय मान इंगित करता है कि संक्रमण की शुरुआत से अंत तक समान गति होगी।
संक्रमण-विलंब : संक्रमण प्रभाव शुरू होने से पहले प्रतीक्षा करने के लिए आवश्यक समय की मात्रा को निर्दिष्ट करता है। इस मामले में, ऊंचाई तुरंत संक्रमण शुरू कर देगी, जबकि चौड़ाई 1 सेकंड इंतजार करेगी।

क्यूबिक-बेज़ियर

cubic-bezier फ़ंक्शन एक संक्रमण समय फ़ंक्शन है जो अक्सर कस्टम और चिकनी संक्रमण के लिए उपयोग किया जाता है।

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

फ़ंक्शन चार पैरामीटर लेता है:

cubic-bezier(P1_x, P1_y, P2_x, P2_y)

इन मापदंडों को उन बिंदुओं पर मैप किया जाएगा जो एक बेज़ियर वक्र का हिस्सा हैं:

CSS Bézier Curves के लिए, P0 और P3 हमेशा एक ही स्थान पर होते हैं। P0 (0,0) पर है और P3 (1,1) पर है, जो मेनस है कि क्यूबिक-बेज़ियर फ़ंक्शन को दिए गए पैरामीटर केवल 0 और 1 के बीच हो सकते हैं।

यदि आप ऐसे पैरामीटर पास करते हैं जो इस अंतराल में नहीं हैं, तो फ़ंक्शन एक linear संक्रमण में डिफ़ॉल्ट होगा।

चूंकि सीएसएस में क्यूबिक-बेज़ियर सबसे लचीला संक्रमण है, आप अन्य सभी संक्रमण समय फ़ंक्शन को क्यूबिक-बेज़ियर में अनुवाद कर सकते हैं:

linear : cubic-bezier(0,0,1,1)

ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
संक्रमण

खोज…