CSS Transitions

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

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

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

CSS Transitions

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

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

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

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

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

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

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

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।

CSS Transition उदाहरण

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

दोनों स्टेट्स में, बटन 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; } 

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

[कोड परिणाम यहां]


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

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

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

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

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

यदि आप CSS :hover सेलेक्टर के बारे में अधिक सीखने में रुचि रखते हैं, तो CSS :hover सेलेक्टर पर हमारे गाइड को पढ़ें।

ट्रांजीशन स्पीड कर्व

transition-timing-function प्रॉपर्टी आपको ट्रांजीशन इफेक्ट के स्पीड कर्व को निर्दिष्ट करने की अनुमति देती है। यहां इस प्रॉपर्टी द्वारा स्वीकृत कुछ मान हैं:

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

transition-timing-function प्रॉपर्टी के

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

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

हालांकि, मान लें हम चाहते हैं कि हमारा बटन अपने नए बैकग्राउंड कलर में लीनियर ट्रांजीशन का उपयोग करके ट्रांजीशन करे। हम "ease-in" मान निर्दिष्ट करके ऐसा कर सकते हैं। यहां इसके लिए कोड है:

<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; } 

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

[कोड परिणाम]


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

ट्रांजीशन डिले

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

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

<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; } 

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

[कोड परिणाम यहां]


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

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

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

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

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

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 } 

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

[कोड परिणाम यहां]


जब आप बटन पर होवर करते हैं, तो इसका बैकग्राउंड कलर ब्लू में बदल जाता है और इसका बॉर्डर कलर लाइट पिंक में बदल जाता है। यह ट्रांजीशन पूरा होने में दो सेकंड लेता है।

ट्रांजीशन की लिस्ट में प्रत्येक ट्रांजीशन जिस क्रम में दिखाई देता है वह यह प्रभावित नहीं करता कि ट्रांजीशन कैसे दिखाई देता है।

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

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

• transition-property: उन प्रॉपर्टीज को सेट करता है जिन पर ट्रांजीशन इफेक्ट लागू होगा।
• transition-duration: इंगित करता है कि ट्रांजीशन कितने समय तक चलेगा।
• transition-timing-function: ट्रांजीशन की गति को परिभाषित करता है।
• transition-delay: ट्रांजीशन की शुरुआत में डिले करता है।

आइए अपने उपरोक्त उदाहरण का उपयोग यह दिखाने के लिए करें कि ये प्रॉपर्टीज कैसे काम करती हैं। मान लें हम 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; } 

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

[कोड परिणाम]


जैसा कि आप देख सकते हैं, हमने एक बटन बनाया जो ब्लू बैकग्राउंड कलर से और उससे ट्रांजीशन करता है। ये ट्रांजीशन तब होते हैं जब यूजर अपने कर्सर को क्रमशः बटन पर और उससे दूर होवर करता है।

हमारे कोड में, हमने अपने ट्रांजीशन के लिए चार ट्रांजीशन सब-प्रॉपर्टीज (transition-property, transition-duration, transition-timing-function, और transition-delay) निर्दिष्ट कीं। हमने अपने बटन की ऊंचाई, चौड़ाई, टेक्स्ट अलाइनमेंट, और बॉर्डर कलर सेट करने के लिए अपने पहले के उदाहरण से स्टाइल्स का भी उपयोग किया।

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

transition: transition-property transition-duration transition-timing-function transition-delay;

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

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

<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; } 

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

[कोड परिणाम यहां]


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

निष्कर्ष

CSS transition प्रॉपर्टी का उपयोग उस ट्रांजीशन के प्रकार को परिभाषित करने के लिए किया जाता है जो स्टाइल्स के बीच होगा। transition प्रॉपर्टी के चार शॉर्टहैंड प्रॉपर्टीज हैं: transition-property, transition-delay, transition-timing-function, और transition-duration। आप इन सब-प्रॉपर्टीज का उपयोग ट्रांजीशन स्टाइल के एलिमेंट्स को व्यक्तिगत रूप से सेट करने के लिए कर सकते हैं।

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