5 सीएसएस एनिमेशन टिप्स और ट्रिक्स जो आपको पता होनी चाहिए

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

1. होवर पर एक तत्व को बदलना

एक सामान्य डिजाइन अभ्यास में एक ऐसा तत्व होना है जो बातचीत करने पर बढ़ता है। उदाहरण के लिए, जब कोई अपने माउस को बटन पर घुमाता है तो आप बटन को थोड़ा ऊपर की ओर अनुवाद करना चाह सकते हैं। आप इसे CSS का उपयोग करके प्राप्त कर सकते हैं परिवर्तन संपत्ति।

मान लें कि आपके पास एक बटन है:

<बटन>
 मुझे क्लिक करें
बटन>

आपने दस्तावेज़ के मुख्य भाग के साथ-साथ बटन को भी स्टाइल किया है:

/* बटन को पेज के मध्य में संरेखित करता है */
शरीर {
दिखाना: मोड़ना;
ऊंचाई: 100वीएच;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
पृष्ठभूमि का रंग: काला;
}
/* बटन को स्टाइल करता है */
बटन {
गद्दी: 1ईएम 2ईएम;





instagram viewer

पृष्ठभूमि: नीला;
सीमा: 0; 
रंग: सफ़ेद;
बॉर्डर-त्रिज्या: 0.25रेम;
कर्सर: सूचक;
फ़ॉन्ट आकार: 2रेम;
संक्रमण: परिवर्तन 500एमएस;
}
/* होवर स्टेट्स */
बटन: होवर,
बटन:केंद्र {
परिवर्तन: अनुवाद वाई(0.75रेम) 500एमएस;
}

अंतिम ब्लॉक के साथ, आप होवर सेट कर रहे हैं और बटन पर ध्यान केंद्रित कर रहे हैं। दोनों स्थितियों में, आप वाई-अक्ष के साथ 0.75rem द्वारा बटन का अनुवाद करते हैं। बटन इस तरह दिखेगा:

जब आप अपने माउस को बटन पर घुमाते हैं, तो यह ऊपर की दिशा में फ़्लिक करता है। संक्रमण को पूरा होने में आधा सेकंड (500ms) लगता है। यह एक ऐसा पैटर्न है जिसे आप न केवल अपने बटनों पर लागू कर सकते हैं, बल्कि अन्य तत्वों पर भी लागू कर सकते हैं (जैसे चित्र)।

2. एक घोषणा के साथ एकाधिक कीफ्रेम घोषित करना

CSS एनिमेशन में एक अन्य सामान्य पैटर्न एक ही मान पर कई बार पुनरावृति कर रहा है। यह एक विशिष्ट रंग, आकार या अभिविन्यास हो सकता है। आप इसका उपयोग करके इसे प्राप्त कर सकते हैं सीएसएस कीफ़्रेम एनिमेशन एक घोषणा के साथ कई कीफ़्रेम घोषित करके।

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

सबसे पहले, आप क्लिक करने पर ही बटन को एनिमेट करना चाहते हैं। तो आप एक बना सकते हैं स्क्रिप्ट.जेएस फ़ाइल, जिसके अंदर आप बटन तक पहुँचते हैं और क्लिक करने पर बटन पर एक वर्ग को टॉगल करते हैं:

कॉन्स्ट बटन = दस्तावेज़क्वेरी चयनकर्ता ("बटन")
बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", (ई) => {
 बटन.क्लासलिस्ट.टॉगल ('पार्टी का समय')
})

हमने वेब पेज से बटन तक पहुँचने के लिए querySelector का उपयोग किया। DOM ट्रैवर्सल के बारे में अधिक जानने के लिए, हमारी पोस्ट पढ़ें जावास्क्रिप्ट का उपयोग करके DOM को कैसे पार करें.

पार्टी का समय क्लास शीर्षक वाले एनीमेशन को सक्रिय करता है दल:

।पार्टी का समय {
एनिमेशन: दल 2000एमएसअनंत;
}

एनीमेशन के लिए, आप लाल रंग से शुरू करना चाहते हैं और 25% पर पीले रंग में संक्रमण करना चाहते हैं। फिर आप 75% पर वापस पीले रंग में जाने से पहले 50% पर लाल रंग में आ जाएंगे। अंत में, 100% पर, आप गहरे नीले रंग के लिए तैयार होंगे:

@कीफ्रेम दल {
 0%, 50% {
पृष्ठभूमि का रंग: लाल;
 } 
 25%, 75% {
पृष्ठभूमि का रंग: पीला;
 }
 100% {
पृष्ठभूमि का रंग: एचएसएल(200, 72%, 35%);
 }
}

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

3. कस्टम गुणों को एनिमेट करने के लिए @property का उपयोग करना

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

अपने बटन के बैकग्राउंड कलर को लीनियर ग्रेडिएंट में बदलकर शुरू करें:

बटन {
 // अन्यसीएसएस
पृष्ठभूमि: रैखिक ढलान(90डिग्री, नीला, हरा);
 // अन्यसीएसएस
}

यहाँ आउटपुट है:

अक्सर आप बटन पर रंग ग्रेडिएंट को एनिमेट करना चाहेंगे। जबकि ऐसी तरकीबें हैं जिनका उपयोग आप अपने ग्रेडिएंट को इधर-उधर करने के लिए कर सकते हैं, आप वास्तव में इसे एनिमेट नहीं कर सकते। यह है क्योंकि पृष्ठभूमि (साथ ही पृष्ठभूमि छवि) एक एनिमेटेबल संपत्ति नहीं है। यहीं पर @संपत्ति अंदर आता है।

@संपत्ति निर्देश आपको कस्टम गुणों को पंजीकृत करने की अनुमति देता है। जब आप उपयोग करते हैं @संपत्ति, आपको इसे तीन मान प्रदान करने होंगे, अर्थात् वाक्य - विन्यास, inherits, और आरंभिक मूल्य:

@संपत्ति --रंग-1 {
वाक्य - विन्यास: "<रंग>";
inherits: सत्य;
आरंभिक मूल्य: लाल;
}
@संपत्ति --रंग-2 {
वाक्य - विन्यास: "<रंग>";
inherits: सत्य;
आरंभिक मूल्य: नीला;
}

पहला प्रारंभिक संपत्ति है जबकि दूसरा गंतव्य संपत्ति है। अब, एक पृष्ठभूमि छवि (जिसे आप परिवर्तित नहीं कर सकते) को परिवर्तित करने के बजाय, आप इससे संक्रमण करेंगे --रंग-1 को --रंग-2 (आपके कस्टम गुण) एक सेकंड में:

बटन {
संक्रमण: --रंग-1 1000एमएस, --रंग-2 1000एमएस;
}

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

4. नकारात्मक एनिमेशन विलंब का उपयोग करना

सहज एनिमेशन बनाने के लिए एनिमेशन विलंब महत्वपूर्ण हैं। आइए कार्रवाई में इसका एक उदाहरण देखें। इस भाग में एक जोड़ें डिव बटन के शीर्ष पर 15 बिंदुओं वाला तत्व:

<डिवकक्षा="डॉट्स">
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
<डिवकक्षा="डॉट">डिव>
डिव>

यहां प्रत्येक बच्चे को बदलने के लिए कुछ बुनियादी स्टाइलिंग दी गई है डिव एक बिंदु में:

डॉट्स {
दिखाना: मोड़ना;
अंतर: .5रेम;
मार्जिन नीचे: 20पिक्सल;
}
डॉट {
चौड़ाई: 10पिक्सल;
आस्पेक्ट अनुपात: 1;
पृष्ठभूमि का रंग: लाल;
बॉर्डर-त्रिज्या: 50%;
}

यहां हम डॉट्स को क्षैतिज रेखा में रखने के लिए फ्लेक्सबॉक्स का उपयोग करते हैं। Flexbox में गहराई तक जाने के लिए, आप हमारी जाँच कर सकते हैं सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल.

अंदर स्क्रिप्ट.जेएस, कोड जोड़ें जो डॉट्स के एनीमेशन को ट्रिगर करता है। आप टॉगल कर रहे हैं नृत्य डॉट्स पर क्लास:

बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", (ई) => {
 बटन.क्लासलिस्ट.टॉगल ('पार्टी का समय')
// नया कोड
 बिंदु.प्रत्येक के लिए ((डॉट) => {
 डॉट.क्लासलिस्ट.टॉगल ('नृत्य')
 })
})

डांस क्लास शीर्षक वाला एक एनीमेशन सक्रिय करता है उठना:

डॉट।नृत्य {
एनिमेशन: उठना 2000एमएसअनंतएकांतर;
}

एनीमेशन के लिए, वाई-अक्ष के साथ डॉट्स -100 पीएक्स का अनुवाद करें:

@कीफ्रेम उठना {
 100% {
परिवर्तन: अनुवाद वाई(-100 पीएक्स)
 }
}

अब कुछ दिलचस्प करने का समय आ गया है। एक ही समय में डॉट्स बढ़ने के बजाय, आप डॉट्स को लहर की तरह बहने के लिए एनिमेट करना चाहते हैं। इसे प्राप्त करने के लिए, आपको जोड़ना होगा एनीमेशन-देरी डॉट्स तक, और प्रत्येक डॉट को 100ms तक बढ़ाएँ:

डॉट:nth-चाइल्ड (1) {
एनीमेशन-देरी: 100एमएस;
}
डॉट:nth-चाइल्ड (2) {
एनीमेशन-देरी: 200एमएस;
}
डॉट:nth-चाइल्ड (3) {
एनीमेशन-देरी: 300एमएस;
}
डॉट:nth-चाइल्ड (4) {
एनीमेशन-देरी: 400एमएस;
}
/* 15वें बिंदु तक पहुंचने तक करते रहें */

यह एक चिकना एनीमेशन बनाता है जहां बिंदु लहरदार रूप में ऊपर और नीचे जाते हैं। निम्न छवि एनीमेशन के बीच में डॉट्स को कैप्चर करती है:

ध्यान रखें कि यह समस्याग्रस्त हो सकता है, जो हमें पाँचवें सिरे पर लाता है।

5. वरीयताएँ सक्षम करने के लिए प्राथमिकता-कम-गति का उपयोग करें

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

सौभाग्य से, आप अपने एनीमेशन को a के अंदर लपेटकर आसानी से इसका ध्यान रख सकते हैं कोई वरीयता नहीं मीडिया क्वेरी इस प्रकार है:

@मीडिया(प्राथमिकता-कम-गति: कोई वरीयता नहीं) {
डॉट।नृत्य {
एनिमेशन: उठना 2000एमएसअनंतएकांतर;
 }
}

अब अगर आप को Enable करना होता पसंद-कम-गति आपके ब्राउज़र में, तो एनीमेशन नहीं चलेगा।

अधिक सीएसएस टिप्स और ट्रिक्स सीखें

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