सीएसएस संक्रमण

जब आप एक वेब पेज डिजाइन कर रहे हों, तो आप किसी तत्व में संक्रमण जोड़ना चाह सकते हैं। एक निश्चित शर्त पूरी होने पर संक्रमण शुरू हो जाते हैं। उदाहरण के लिए, जब उपयोगकर्ता बटन पर होवर करता है तो आप बटन का पृष्ठभूमि रंग बदलना चाहते हैं।

जब HTML तत्व के गुण बदलते हैं तो आप एनीमेशन प्रभाव बनाने के लिए CSS ट्रांज़िशन प्रॉपर्टी और उसके उप-प्रॉपर्टी का उपयोग कर सकते हैं।

यह ट्यूटोरियल कुछ उदाहरणों के साथ, CSS ट्रांज़िशन की मूल बातें और CSS एनिमेशन बनाने के लिए ट्रांज़िशन प्रॉपर्टी का उपयोग करने के तरीके पर चर्चा करेगा। इस ट्यूटोरियल के अंत तक, आप CSS ट्रांज़िशन और ट्रांज़िशन प्रॉपर्टी के साथ काम करने के विशेषज्ञ होंगे।

CSS ट्रांज़िशन

डिफ़ॉल्ट रूप से, जब एक सीएसएस संपत्ति का मूल्य बदलता है, तो वेब पेज तुरंत परिवर्तन लागू करता है।

उदाहरण के लिए, यदि आप एक शैली परिवर्तन बनाते हैं जो तब सक्रिय होता है जब कर्सर एक बटन पर होवर करता है, जैसे ही उपयोगकर्ता अपने कर्सर के साथ बटन पर होवर करता है, नई शैली लागू हो जाएगी। जैसे ही उपयोगकर्ता का कर्सर बटन से दूर जाता है, बटन तुरंत अपनी डिफ़ॉल्ट शैली में वापस आ जाएगा।

CSS ट्रांज़िशन फ़ीचर का उपयोग दो शैलियों के बीच सहज ट्रांज़िशन बनाने के लिए किया जाता है। जब आप ट्रांज़िशन प्रॉपर्टी का उपयोग करते हैं, तो वेब पेज दो शैलियों के बीच परिवर्तन को एनिमेट करेगा। यह सुविधा आपको अधिक सौंदर्य-सुखदायक शैली परिवर्तन करने की अनुमति देती है।

CSS ट्रांज़िशन के दो घटक हैं। य़े हैं:

• नई CSS संपत्ति जिसे आप किसी तत्व पर लागू करना चाहते हैं।
• संक्रमण की अवधि।

डिफ़ॉल्ट रूप से, संक्रमण की अवधि 0 सेकंड पर सेट होती है। इसका अर्थ यह है कि यदि आप किसी अवधि को परिभाषित नहीं करते हैं, तो आपके द्वारा निर्दिष्ट संक्रमण का कोई प्रभाव नहीं पड़ेगा—दूसरे शब्दों में, शैली में परिवर्तन तुरंत हो जाएगा।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

CSS ट्रांज़िशन उदाहरण

मान लीजिए कि हम एक वेबसाइट के लिए एक बटन डिजाइन कर रहे हैं और हम चाहते हैं कि जब उपयोगकर्ता अपने कर्सर के साथ उस पर होवर करे तो बटन की शैली बदल जाए। जब उपयोगकर्ता अपने कर्सर के साथ बटन पर होवर नहीं कर रहा है, तो बटन में नीली सीमा होनी चाहिए। फिर, जब उपयोगकर्ता अपने कर्सर के साथ बटन पर होवर करता है, तो बटन का पृष्ठभूमि रंग डिफ़ॉल्ट रंग (सफेद) से नीला हो जाना चाहिए।

दोनों राज्यों में, बटन 100px लंबा और 100px चौड़ा होना चाहिए, और हमारे बटन का टेक्स्ट बीच में होना चाहिए। दो राज्यों के बीच संक्रमण में दो सेकंड लगने चाहिए।

यहां वह कोड है जिसका उपयोग हम इस बटन को बनाने के लिए करेंगे:

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

हमारा कोड लौटाता है:

[Code result here]


हमारे कोड में, हमने कहा है कि हमारा बटन 100px चौड़ा और 100px ऊंचा होना चाहिए और बटन की सामग्री का केंद्र संरेखण होना चाहिए। हमने अपने बटन के लिए एक 3-पीएक्स-चौड़ा ठोस नीला बॉर्डर भी निर्दिष्ट किया है।

जब आप अपने कर्सर से बटन पर होवर करते हैं, तो आप देख सकते हैं कि इसकी पृष्ठभूमि का रंग नीले रंग में बदल जाता है। जब आप अपने कर्सर को दूर ले जाते हैं, तो बटन की पृष्ठभूमि का रंग वापस सफेद में बदल जाता है।

इस उदाहरण में, हमने बैकग्राउंड कलर प्रॉपर्टी के लिए दो सेकंड की ट्रांज़िशन अवधि निर्दिष्ट की है। इसका मतलब यह है कि जब उपयोगकर्ता कर्सर के साथ बटन पर होवर करता है, तो बटन की पृष्ठभूमि का रंग पूरी तरह से सफेद से नीले रंग में बदलने में दो सेकंड का समय लगता है - दूसरे शब्दों में परिवर्तन तात्कालिक नहीं है।

इसी तरह, जब उपयोगकर्ता अपने कर्सर को बटन से हटाता है, तो पृष्ठभूमि का रंग दो सेकंड की अवधि में नीले से सफेद में बदल जाता है—इसलिए फिर से, तुरंत नहीं। इस प्रकार, हम पृष्ठ पर कर्सर के स्थान के आधार पर नए पृष्ठभूमि रंग से और उसके लिए एक सहज, दो-सेकंड का संक्रमण प्राप्त करने में सक्षम हैं।

फिर हमने उस शैली को निर्दिष्ट किया जिसे हम ट्रिगर करना चाहते थे जब उपयोगकर्ता कर्सर के साथ बटन पर होवर करता है। हमने इसे :होवर चयनकर्ता का उपयोग करके पूरा किया। जब कोई उपयोगकर्ता अपने कर्सर के साथ उस तत्व पर होवर करता है तो प्रोग्राम :होवर चयनकर्ता में परिभाषित शैली को लागू करता है।

यदि आप सीएसएस के बारे में अधिक जानने में रुचि रखते हैं:होवर चयनकर्ता, सीएसएस के लिए हमारी मार्गदर्शिका पढ़ें:होवर चयनकर्ता।

संक्रमण गति वक्र

ट्रांज़िशन-टाइमिंग-फ़ंक्शन संपत्ति आपको संक्रमण प्रभाव की गति वक्र निर्दिष्ट करने की अनुमति देती है। इस संपत्ति द्वारा स्वीकार किए गए कुछ मान यहां दिए गए हैं:

मान (और संबंधित विवरण)

संक्रमण-समय-कार्य संपत्ति का

जैसा कि आप देख सकते हैं, इस तालिका में पहला मान- "आसानी" - डिफ़ॉल्ट मान है। इसका अर्थ यह है कि यदि आप ट्रांज़िशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी के लिए कोई मान निर्दिष्ट नहीं करते हैं, या यदि आप किसी ट्रांज़िशन को स्टाइल करते समय प्रॉपर्टी को बिल्कुल भी निर्दिष्ट नहीं करते हैं, तो वेब पेज इस मान का उपयोग करने के लिए डिफ़ॉल्ट होगा।

ट्रांज़िशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी कैसे काम करती है, यह स्पष्ट करने के लिए हमारे पिछले उदाहरण से कोड लेते हैं। हमारे पिछले उदाहरण में, हमने "आसान" गति वक्र निर्दिष्ट किया था। इसका मतलब यह है कि हमारे बटन की स्टाइल धीमी शुरुआत, तेज त्वरण और धीमी अंत के साथ एक शैली से दूसरी शैली में बदल जाएगी।

हालांकि, मान लीजिए कि हम चाहते हैं कि हमारा बटन रैखिक संक्रमण का उपयोग करके अपने नए पृष्ठभूमि रंग में संक्रमण करे। हम "ईज़ी-इन" मान निर्दिष्ट करके ऐसा कर सकते हैं। यहाँ इसके लिए कोड है:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

हमारा कोड लौटाता है:

[Result of code]


हमारी शैलियाँ अधिकतर वैसी ही हैं जैसी हमने अपने पिछले उदाहरण में उपयोग की थीं। अंतर केवल इतना है कि ease . निर्दिष्ट करने के बजाय संक्रमण, हम एक linear . निर्दिष्ट करते हैं संक्रमण। इसका मतलब है कि एक बार ट्रिगर होने के बाद संक्रमण की गति लगातार बनी रहेगी।

संक्रमण विलंब

संक्रमण-विलंब गुण आपको संक्रमण प्रभाव के लिए विलंब निर्दिष्ट करने की अनुमति देता है। ट्रांज़िशन-देरी प्रॉपर्टी को असाइन किया गया मान सेकंड में होना चाहिए।

मान लीजिए कि हम चाहते हैं कि हमारा बटन एक सेकंड की देरी के बाद अपने नए पृष्ठभूमि रंग में बदल जाए। हम निम्नलिखित कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

हमारा कोड लौटाता है:

[Code result here]


हमारे कोड में, हम अपने संक्रमण की देरी को एक सेकंड के लिए निर्दिष्ट करते हैं। इसलिए, संक्रमण तब तक शुरू नहीं होता जब तक उपयोगकर्ता बटन पर अपना कर्सर घुमाना शुरू नहीं कर देता।

एकाधिक ट्रांज़िशन लागू करना

जब आप ट्रांज़िशन के साथ काम कर रहे हों, तो आप यह तय कर सकते हैं कि आप एक से अधिक ट्रांज़िशन प्रभाव चाहते हैं।

आप अनेक ट्रांज़िशन निर्दिष्ट करके और प्रत्येक ट्रांज़िशन को अल्पविराम से अलग करके ऐसा कर सकते हैं। प्रत्येक संक्रमण में एक अवधि, गति वक्र और कोई अन्य विशेषता हो सकती है जो एक नियमित संक्रमण उपयोग करेगा।

उदाहरण के लिए, पहले से हमारे बटन का उदाहरण लेते हैं। मान लीजिए हम अपने बटन के बैकग्राउंड कलर को न केवल ब्लू में बदलना चाहते हैं, बल्कि हम अपने बटन के बॉर्डर कलर को भी पिंक में बदलना चाहते हैं। ये दोनों तब होने चाहिए जब उपयोगकर्ता कर्सर के साथ तत्व पर होवर करता है। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

हमारा कोड लौटाता है:

[Code result here]


जब आप बटन पर होवर करते हैं, तो इसकी पृष्ठभूमि का रंग नीला हो जाता है और इसके बॉर्डर का रंग हल्के गुलाबी रंग में बदल जाता है। इस संक्रमण को पूरा होने में दो सेकंड लगते हैं।

संक्रमणों की सूची में प्रत्येक संक्रमण जिस क्रम में प्रकट होता है, वह संक्रमण के प्रकट होने के तरीके को प्रभावित नहीं करता है।

CSS ट्रांज़िशन लॉन्गहैंड बनाम शॉर्टहैंड

हमारे उपरोक्त उदाहरणों में, हमने अपने ट्रांज़िशन को स्टाइल करने के लिए ट्रांज़िशन प्रॉपर्टी का इस्तेमाल किया। CSS में ट्रांज़िशन को परिभाषित करने के लिए उपयोग की जाने वाली चार अलग-अलग उप-प्रॉपर्टी के लिए ट्रांज़िशन प्रॉपर्टी शॉर्टहैंड है। ये चार उप गुण हैं:

• संक्रमण-संपत्ति :उन गुणों को सेट करता है जिन पर एक संक्रमण प्रभाव लागू किया जाएगा।
• संक्रमण-अवधि :इंगित करता है कि संक्रमण कितने समय तक चलेगा।
• संक्रमण-समय-समारोह :संक्रमण की गति को परिभाषित करता है।
• संक्रमण-देरी :संक्रमण की शुरुआत में देरी करता है।

आइए हमारे उपरोक्त उदाहरण का उपयोग यह प्रदर्शित करने के लिए करें कि ये गुण कैसे काम करते हैं। मान लीजिए कि हम नीले बॉर्डर, एक डिफ़ॉल्ट (सफेद) पृष्ठभूमि रंग और केंद्र-संरेखित पाठ के साथ 100px गुणा 100px बटन बनाना चाहते हैं। जब उपयोगकर्ता अपने कर्सर के साथ उस पर होवर करता है तो हमारे बटन की पृष्ठभूमि का रंग नीला हो जाना चाहिए। इस संक्रमण में 2 सेकंड लगने चाहिए, और उपयोगकर्ता द्वारा अपने कर्सर के साथ बटन पर मँडराना शुरू करने के बाद इसे 0.5 सेकंड शुरू होना चाहिए।

हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

हमारा कोड लौटाता है:

[Code result]


जैसा कि आप देख सकते हैं, हमने एक बटन बनाया है जो नीले रंग की पृष्ठभूमि के रंग में और उससे संक्रमण करता है। ये संक्रमण तब होते हैं जब उपयोगकर्ता अपने कर्सर को क्रमशः बटन से ऊपर और दूर घुमाता है।

हमारे कोड में, हमने अपने संक्रमण के लिए चार संक्रमण उप-प्रॉपर्टी (संक्रमण-संपत्ति, संक्रमण-अवधि, संक्रमण-समय-कार्य, और संक्रमण-विलंब) निर्दिष्ट किए हैं। हमने अपने बटन की ऊंचाई, चौड़ाई, टेक्स्ट अलाइनमेंट और बॉर्डर कलर सेट करने के लिए अपने पिछले उदाहरण की शैलियों का भी उपयोग किया।

वैकल्पिक रूप से, हम संक्रमण आशुलिपि का उपयोग कर सकते हैं। शॉर्टहैंड का उपयोग करने से हम अपने CSS ट्रांज़िशन को कोड की एक लाइन पर निर्दिष्ट कर सकते हैं, न कि उन चार लाइनों पर जो हमने पहले इस्तेमाल की थीं। ट्रांज़िशन शॉर्टहैंड का सिंटैक्स इस प्रकार है:

संक्रमण:संक्रमण-संपत्ति संक्रमण-अवधि संक्रमण-समय-कार्य संक्रमण-देरी;

ऊपर निर्दिष्ट मानों का क्रम वह क्रम है जिसे आपको ट्रांज़िशन बनाते समय उपयोग करने की आवश्यकता होती है।

आइए एक उदाहरण का उपयोग यह समझाने के लिए करें कि संक्रमण आशुलिपि कैसे काम करता है। यहाँ वह कोड है जिसका उपयोग हम ट्रांज़िशन शॉर्टहैंड का उपयोग करके पहले से अपना बटन बनाने के लिए करेंगे:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

हमारा कोड लौटाता है:

[Code result here]


जैसा कि आप देख सकते हैं, हमने यहाँ वही शैलियाँ लागू की हैं जो हमने पिछले उदाहरण में की थीं। केवल अंतर यह है कि प्रत्येक व्यक्तिगत उप-संपत्ति को अपनी लाइन पर सूचीबद्ध करके हमारे संक्रमण के लिए शैलियों को निर्दिष्ट करने के बजाय, हमने इसके बजाय संक्रमण आशुलिपि का उपयोग किया।

निष्कर्ष

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

उदाहरणों के साथ, इस ट्यूटोरियल ने चर्चा की कि ट्रांज़िशन प्रॉपर्टी और उसके चार उप-प्रॉपर्टी का उपयोग करके सीएसएस में एक ट्रांज़िशन कैसे बनाया जाए। अब आप एक पेशेवर वेब डेवलपर की तरह CSS ट्रांज़िशन बनाना शुरू करने के लिए तैयार हैं!