UI परिवर्तन को हाइलाइट करने के लिए CSS3 के बदलाव और एनिमेशन का उपयोग कैसे करें

डिजाइनरों और कलाकारों के पास गति, प्रभाव, और विभिन्न प्रकार के भ्रमों के साथ प्रयोग करने का एक लंबा इतिहास है, जो उनके काम में एक अतिरिक्त परत जोड़ने के उद्देश्य से हैं। ओप आर्ट मूवमेंट ने गति का आभास देने के लिए 1960 के दशक में ऑप्टिकल भ्रम का उपयोग करना शुरू किया.

तब से नए और नए दृष्टिकोण सामने आए हैं, जैसे हाल ही में लोकप्रिय गतिज कला जो बहुआयामी आंदोलन का उपयोग करके दर्शकों के दृष्टिकोण को बढ़ाती है। मोशन 1967 में पहले ब्लिंकिंग कर्सर के आविष्कार के साथ कंप्यूटर विज्ञान में भी दिखाई दिया.

फ्रंट-एंड डेवलपमेंट में सीएसएस 3 जारी होने से पहले डोम तत्व आमतौर पर जावास्क्रिप्ट द्वारा एनिमेटेड थे, और यह एक तरीका है जो अभी भी काम करता है, लेकिन ए CSS3 द्वारा पेश किए गए नए गुण हमें अपने डिजाइनों को बढ़ाने की अनुमति देते हैं विभिन्न प्रभावों और गति के साथ अधिक सहज तरीके से.

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

संक्रमण

संक्रमण और एनिमेशन दोनों का उपयोग किया जाता है राज्य में परिवर्तनों की कल्पना करें द्वारा एक HTML तत्व का अपने सीएसएस गुणों में से एक या अधिक को संशोधित करना.

स्टेट चेंज विज़ुअलाइज़ेशन का सबसे सरल रूप एक बटन या लिंक के रंग को बदल रहा है जब यह होवर किया जाता है। जब ऐसा होता है, तो तत्व को थोड़ा अलग शैली मिलती है, जिसे आमतौर पर दर्शक देखते हैं जैसे कि स्क्रीन पर कुछ स्थानांतरित हो गया हो.

होवर (या फ़ोकस, या क्लिक) पर एक लिंक के सीएसएस गुणों को बदलना संक्रमण का सबसे पुराना और सरल रूप है, और यह CSS3 के युग से पहले अस्तित्व में था।.

 a रंग: नारंगी;  a: होवर color: red;  a: फोकस रंग: नीला;  a: visit color: green; 

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

हम अगले CSS में नए CSS गुणों पर एक नज़र डालेंगे, यह समझने के बाद कि एनिमेशन कैसे भिन्न होते हैं। अभी के लिए, आइए सबसे महत्वपूर्ण चीजें देखें जिन्हें आपको संक्रमण के बारे में जानना होगा.

1. उनके पास हमेशा एक शुरुआत और एक अंतिम स्थिति होती है.
2. प्रारंभ और अंत बिंदुओं के बीच की स्थिति को ब्राउज़र द्वारा स्पष्ट रूप से परिभाषित किया गया है, हम इसे सीएसएस के साथ नहीं बदल सकते.
3. उन्हें ज़रूरत है स्पष्ट ट्रिगर, जैसे CSS द्वारा एक नया pseudoclass जोड़ना, या jQuery द्वारा एक नया वर्ग.

आप नीचे दिए गए CSS3 बदलावों के स्मार्टली उपयोग किए गए एक सुंदर उदाहरण को देख सकते हैं, जिसमें लेखक छिपी हुई जानकारी को इस तरह से प्रकट करता है जो गैर-घुसपैठ है लेकिन फिर भी उपयोगकर्ताओं को नई सामग्री पर केंद्रित करता है.

एनिमेशन

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

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

यद्यपि CSS3 परिष्कृत एनिमेशन बनाने के लिए शानदार तरीके प्रदान करता है, लेकिन आम तौर पर उन्हें संक्रमणों की तुलना में बनाना कठिन होता है, इसीलिए वहाँ कई बेहतरीन एनिमेशन लाइब्रेरी हैं, जो हमारे काम को सुविधाजनक बना सकती हैं.

CSS3 एनिमेशन के बारे में आपको जिन सबसे महत्वपूर्ण बातों की जानकारी होनी चाहिए उनमें शामिल हैं:

1. उन्हें स्पष्ट ट्रिगर की आवश्यकता नहीं है, वे पृष्ठ लोड पर शुरू कर सकते हैं या जब ब्राउज़र में एक और डोम घटना होती है
2. उनका उपयोग उन मामलों में किया जा सकता है जब संक्रमण का उपयोग किया जाता है, उदाहरण के लिए जब एक नया वर्ग या छद्मकोश जोड़ा जाता है या हटाया जाता है (हालांकि यह एक कम लगातार उपयोग का मामला है)
3. वे हमें कुछ keyframes (मध्यवर्ती राज्यों) को परिभाषित करने की आवश्यकता है
4. हम संख्या, आवृत्ति और इन keyframes की शैली निर्दिष्ट कर सकते हैं

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

ये नई कक्षाएं निर्दिष्ट के साथ एनिमेटेड हैं @keyframes CSS फ़ाइल में नियम। जब उपयोगकर्ता अगली बार बटन पर क्लिक करता है, तो अतिरिक्त कक्षाएं jQuery द्वारा हटा दी जाती हैं, और मेनू फिर से छिपा हुआ हो जाता है.

सीएसएस गुण और @keyframes एट-नियम

संक्रमण के लिए हम या तो उपयोग कर सकते हैं संक्रमण आशुलिपि संपत्ति, या 4 एकल संक्रमण से संबंधित गुण: संक्रमण-संपत्ति, अवस्थांतर अवधि, संक्रमण-समय-समारोह, तथा संक्रमण-विलंब. शॉर्टहैंड प्रॉपर्टी में संक्षिप्त रूप में सभी एकल गुण होते हैं.

एनिमेशन के लिए एनीमेशन हमारे हाथों में आशुलिपि संपत्ति जो 8 एकल एनीमेशन गुणों से कम नहीं है, अर्थात् एनीमेशन नाम, एनीमेशन अवधि, एनीमेशन-समय-समारोह, एनीमेशन-विलंब, एनीमेशन-यात्रा की गिनती, एनीमेशन दिशा, एनीमेशन भरण-मोड, तथा एनीमेशन खेलने राज्य.

संक्रमण और एनिमेशन दोनों के साथ सबसे महत्वपूर्ण बात यह है कि हम हमेशा राज्य परिवर्तन के दौरान संशोधित किए जाने वाले CSS गुणों को निर्दिष्ट करने की आवश्यकता है. संक्रमण के साथ ऐसा दिखता है:

 .तत्व पृष्ठभूमि: नारंगी; संक्रमण-संपत्ति: पृष्ठभूमि; संक्रमण-अवधि: 3 एस; संक्रमण-समय-समारोह: आसानी से; । भुगतान: होवर पृष्ठभूमि: लाल; 

हमने निर्दिष्ट किया पृष्ठभूमि संपत्ति, क्योंकि यह वही है जो संक्रमण के दौरान बदल जाएगी.

हम एक से अधिक CSS संपत्तियों को एक संक्रमण में बदल सकते हैं, इस मामले में ऊपर दिए गए कोड को इस तरह संशोधित किया जाएगा: संक्रमण-संपत्ति: पृष्ठभूमि, सीमा;. हम भी उपयोग कर सकते हैं संक्रमण-संपत्ति: सभी;, यदि हम प्रत्येक संपत्ति को अलग से निर्दिष्ट नहीं करना चाहते हैं.

हम शॉर्टहैंड चुन सकते हैं संक्रमण साथ ही संपत्ति। यदि हम ऐसा करते हैं, तो हमें हमेशा आंतरिक गुणों के उचित क्रम पर ध्यान देने की आवश्यकता है (डॉक्स में वाक्यविन्यास देखें).

 .तत्व पृष्ठभूमि: नारंगी; संक्रमण: पृष्ठभूमि 3 एस आसानी-में; । भुगतान: होवर पृष्ठभूमि: लाल; 

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

 .तत्व स्थिति: रिश्तेदार; एनीमेशन-नाम: स्लाइड; एनीमेशन-अवधि: 3 एस; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से;  @keyframes स्लाइड 0% बाएँ: 0;  50% बाएं: 200 पीएक्स;  100% बाएँ: 400px; 

ऊपर के उदाहरण में हमने बहुत ही सरल स्लाइडिंग प्रभाव बनाया। हमने परिभाषित किया एनीमेशन नाम, इसके बाद इसमें 3 कीफ्रेम बंधे, जिन्हें हमने इसमें निर्दिष्ट किया था @keyframes स्लाइड … पर-नियम। प्रतिशत एनीमेशन की अवधि को संदर्भित करता है, इसलिए 50% उदाहरण में 1.5 s पर होता है.

हम आशुलिपि का उपयोग कर सकते थे एनीमेशन संपत्ति के रूप में अच्छी तरह से, या अधिक सरल के साथ keyframes परिभाषित कर सकता है से निम्नलिखित तरीके से नियम:

 .तत्व स्थिति: रिश्तेदार; एनीमेशन: स्लाइड 3 एस आसानी-में;  @keyframes स्लाइड बाएँ: 0 से;  से बाएं: 400px; 

अधिक जटिल एनिमेशन का निर्माण कला का अपना रूप है, यदि आप रुचि रखते हैं, तो आप हमारे दो एनिमेशन ट्यूटोरियल पढ़ सकते हैं कि उन्नत मार्की कैसे बनाएं, और उछाल प्रभाव कैसे बनाएं.

संक्रमण और एनिमेशन का निर्माण करते समय, आपको यह जानना होगा सभी सीएसएस गुण एनिमेटेड नहीं हो सकते, इसलिए यह हमेशा एक अच्छा विचार है कि आप संपत्ति को सीएसएस एनिमेटेबल में बदलना चाहते हैं.

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