सीएसएस संक्रमण
सीएसएस संक्रमण
CSS ट्रांज़िशन आपको एक निश्चित अवधि में संपत्ति के मूल्यों को सुचारू रूप से बदलने की अनुमति देता है।
CSS संक्रमण प्रभाव देखने के लिए नीचे दिए गए तत्व पर माउस ले जाएँ:
इस अध्याय में आप निम्नलिखित गुणों के बारे में जानेंगे:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
संक्रमण के लिए ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
CSS ट्रांज़िशन का उपयोग कैसे करें?
एक संक्रमण प्रभाव बनाने के लिए, आपको दो चीजें निर्दिष्ट करनी होंगी:
- सीएसएस संपत्ति जिसे आप प्रभाव जोड़ना चाहते हैं
- प्रभाव की अवधि
नोट: यदि अवधि भाग निर्दिष्ट नहीं है, तो संक्रमण का कोई प्रभाव नहीं पड़ेगा, क्योंकि डिफ़ॉल्ट मान 0 है।
निम्न उदाहरण 100px * 100px लाल <div> तत्व दिखाता है। <div> तत्व ने चौड़ाई संपत्ति के लिए 2 सेकंड की अवधि के साथ एक संक्रमण प्रभाव भी निर्दिष्ट किया है:
उदाहरण
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
संक्रमण प्रभाव तब शुरू होगा जब निर्दिष्ट सीएसएस संपत्ति (चौड़ाई) मूल्य बदलती है।
अब, जब कोई उपयोगकर्ता <div> तत्व पर नियंत्रण रखता है, तो हम चौड़ाई गुण के लिए एक नया मान निर्दिष्ट करते हैं:
उदाहरण
div:hover
{
width: 300px;
}
ध्यान दें कि जब कर्सर तत्व से बाहर हो जाता है, तो यह धीरे-धीरे अपनी मूल शैली में वापस आ जाएगा।
कई संपत्ति मान बदलें
निम्न उदाहरण चौड़ाई और ऊंचाई संपत्ति दोनों के लिए एक संक्रमण प्रभाव जोड़ता है, चौड़ाई के लिए 2 सेकंड की अवधि और ऊंचाई के लिए 4 सेकंड के साथ:
उदाहरण
div
{
transition: width 2s, height 4s;
}
संक्रमण की गति वक्र निर्दिष्ट करें
संपत्ति संक्रमण प्रभाव की transition-timing-functionगति वक्र निर्दिष्ट करती है।
ट्रांज़िशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी में निम्नलिखित मान हो सकते हैं:
ease- एक धीमी शुरुआत के साथ एक संक्रमण प्रभाव निर्दिष्ट करता है, फिर तेज, फिर धीरे-धीरे समाप्त होता है (यह डिफ़ॉल्ट है)linear- शुरू से अंत तक एक ही गति के साथ एक संक्रमण प्रभाव निर्दिष्ट करता हैease-in- धीमी शुरुआत के साथ एक संक्रमण प्रभाव निर्दिष्ट करता हैease-out- धीमे अंत के साथ एक संक्रमण प्रभाव निर्दिष्ट करता हैease-in-out- धीमी शुरुआत और अंत के साथ एक संक्रमण प्रभाव निर्दिष्ट करता हैcubic-bezier(n,n,n,n)- आपको क्यूबिक-बेज़ियर फ़ंक्शन में अपने स्वयं के मान परिभाषित करने देता है
निम्नलिखित उदाहरण कुछ विभिन्न गति वक्रों को दिखाता है जिनका उपयोग किया जा सकता है:
उदाहरण
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
संक्रमण प्रभाव में देरी
transition-delayसंपत्ति संक्रमण प्रभाव के लिए देरी (सेकंड में) निर्दिष्ट करती है ।
निम्न उदाहरण में प्रारंभ करने से पहले 1 सेकंड की देरी है:
उदाहरण
div {
transition-delay: 1s;
}
संक्रमण + परिवर्तन
निम्नलिखित उदाहरण परिवर्तन के लिए एक संक्रमण प्रभाव जोड़ता है:
उदाहरण
div {
transition:
width 2s, height 2s, transform 2s;
}
अधिक संक्रमण उदाहरण
CSS संक्रमण गुणों को एक-एक करके इस तरह निर्दिष्ट किया जा सकता है:
उदाहरण
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
या आशुलिपि संपत्ति का उपयोग करके transition:
उदाहरण
div
{
transition: width 2s linear 1s;
}
सीएसएस संक्रमण गुण
निम्न तालिका सभी CSS संक्रमण गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |