CSS कीफ़्रेम एनिमेशन कैसे बनाएं

CSS डेवलपर्स को keyframes एनिमेशन का उपयोग करके अपने वेब पेजों को जीवंत करने की क्षमता देता है।

CSS एनीमेशन HTML तत्व की प्रारंभिक स्थिति को उसके विभिन्न गुणों के माध्यम से बदलकर प्राप्त किया जाता है। कुछ सामान्य सीएसएस गुण जिन्हें एनिमेटेड किया जा सकता है उनमें शामिल हैं:

---

---

टिकटोक पर शब्द कैसे डालते हैं

• चौड़ाई
• ऊंचाई
• पद
• रंग
• अस्पष्टता

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

एक कीफ्रेम तत्व क्या है?

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

सुनने में यह सुनने में बहुत अटपटा लग सकता है, लेकिन वास्तव में यह काफी सरल है। NS कीफ़्रेम तत्व एक बहुत ही सीधी संरचना है जिसे आसानी से समझा जा सकता है और किसी भी एनीमेशन आवश्यकताओं को पूरा करने के लिए समायोजित किया जा सकता है।

मुख्य-फ़्रेम संरचना उदाहरण


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

मान लीजिए कि आप हरे रंग के आयताकार बटन को नीले गोल बटन में बदलकर चेतन करना चाहते हैं।

के मापदंडों के भीतर से उपरोक्त अनुभाग में आपको हरे रंग के आयताकार बटन की तरह दिखने वाले तत्व को रखने के लिए आवश्यक सभी स्टाइल रखने की आवश्यकता होगी, फिर में प्रति अनुभाग, आप इस बटन को नीले गोल बटन में बदलने के लिए सभी स्टाइलिंग आवश्यकताओं को रखेंगे।

---

---

यदि आप सोच रहे हैं, तो यह एनीमेशन की तरह बहुत ज्यादा नहीं लगता है। ठीक है, ऐसा इसलिए है क्योंकि इस पूरी प्रक्रिया का एक प्रमुख घटक अभी तक पेश नहीं किया गया है --- यह घटक एनीमेशन संपत्ति है।

एनिमेशन संपत्ति

NS एनिमेशन संपत्ति विभिन्न उप-गुणों का एक सेट है; इनका उपयोग वांछित HTML तत्व को चेतन करने के लिए उपरोक्त कीफ़्रेम संरचना के संयोजन में किया जाता है।

---

---

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

• एनिमेशन-नाम
• एनिमेशन-अवधि
• एनिमेशन-टाइमिंग-फ़ंक्शन
• एनिमेशन-देरी
• एनिमेशन-पुनरावृत्ति-गिनती

वेब पेज पर एनिमेशन का उपयोग करना

उपरोक्त परिदृश्य का उपयोग करते हुए, लक्ष्य एक एनिमेटेड बटन बनाना है।

बटन एनिमेशन उदाहरण







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




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

संबंधित: CSS चयनकर्ताओं का उपयोग करके वेब पेज के भाग को कैसे लक्षित करें

एनिमेशन-नाम संपत्ति

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

यदि आप अन्य उप-गुणों में से एक या दो को शामिल करना भूल गए हैं तो आपके पास अभी भी काफी अच्छा एनीमेशन हो सकता है। हालांकि, अगर आप भूल गए एनिमेशन-नाम संपत्ति आपके पास कोई एनीमेशन नहीं होगा।

एनिमेशन-अवधि संपत्ति

इस गुण का उपयोग यह निर्धारित करने के लिए किया जाता है कि एक राज्य से दूसरे राज्य में संक्रमण करते समय एक एनिमेटेड तत्व को कितना समय लेना चाहिए।

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

एनिमेशन-देरी संपत्ति

यह संपत्ति एक कारण से महत्वपूर्ण है; कुछ वेब पेजों को पूरी तरह लोड होने में कुछ सेकंड लग सकते हैं (कई अलग-अलग कारकों के कारण)। ऐसा एनीमेशन-देरी संपत्ति वेब पेज को लोड होने में कुछ समय लगने की स्थिति में एनीमेशन को तुरंत शुरू होने से रोकता है।

उपरोक्त उदाहरण में, एनीमेशन-देरी संपत्ति 4s पर सेट है, जिसका अर्थ है कि वेबपेज पर जाने के 4 सेकंड बाद तक एनीमेशन शुरू नहीं होगा (एनीमेशन शुरू होने से पहले वेब पेज को लोड करने के लिए पर्याप्त समय देना)।

एनिमेशन-पुनरावृत्ति-गिनती संपत्ति

यह गुण बताता है कि एनिमेटेड तत्व को कितनी बार एक राज्य से दूसरे राज्य में संक्रमण करना चाहिए। NS एनीमेशन-पुनरावृत्ति-गिनती संपत्ति ऐसे मान लेता है जो शब्द और संख्याएं हैं। संख्या मान 1 से ऊपर की ओर कुछ भी हो सकता है, जबकि शब्द मान आमतौर पर होता है अनंत .

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

एनिमेशन-टाइमिंग-फ़ंक्शन संपत्ति

यह गुण एनिमेटेड तत्व की गति को निर्देशित करता है क्योंकि यह एक राज्य से दूसरे राज्य में संक्रमण करता है। NS एनिमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी आमतौर पर तीन आसान मूल्यों में से एक सौंपा जाता है।

• आराम से
• आराम करो
• आसानी से बाहर

NS आसानी से बाहर मूल्य ऊपर प्रयोग किया जाता है; यह धीरे-धीरे एनीमेशन को एक राज्य से दूसरे राज्य में स्थानांतरित करता है। यदि लक्ष्य एक धीमी गति से संक्रमण बनाना है जब बटन हरे रंग के आयत से नीले वृत्त में बदल रहा हो तो आप इसका उपयोग करेंगे आसानी से मूल्य . यदि आप केवल विपरीत दिशा में धीमी गति से संक्रमण चाहते हैं तो आप इसका उपयोग करेंगे आराम से मूल्य .

हमारे कोड को कम करना

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

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

बटन एनिमेशन उदाहरण के लिए कोड को कम करना







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}