वेबपेज को इंटरैक्टिव बनाने के लिए CSS सबसे शक्तिशाली तरीकों में से एक है। यह हमारे मूल के रूप और अनुभव को बदल देता है वेब पृष्ठ। सीएसएस द्वारा प्रदान की जाने वाली महत्वपूर्ण और रोमांचक विशेषताओं में से एक यह है कि यह हमें एनिमेशन का प्रदर्शन करने देता है। यह हमारे पृष्ठ के भीतर तत्वों को स्थानांतरित करने की अनुमति देता है। निम्नलिखित क्रम में CSS में हमारे एनिमेशन की यात्रा शुरू करते हैं:
सीएसएस में एनिमेशन
हमारी वेबसाइट पर एनिमेशन जोड़ना उपयोगकर्ताओं का ध्यान आकर्षित करने का एक शानदार तरीका है। यह न केवल हमारे पेज के लिए मूल्य जोड़ता है बल्कि उपयोगकर्ता के अनुभव को भी समृद्ध करता है। CSS में एनीमेशन दो भागों में बनाया गया है। वे
- कीफ्रेम
- एनीमेशन
सीएसएस एनिमेशन सभी ब्राउज़रों में समर्थित हैं। हालाँकि, कुछ पुराने ब्राउज़र जैसे कि Safari (संस्करण 8.0 तक) को एनीमेशन गुणों की व्याख्या करने के लिए उपसर्ग (-webkit-) की आवश्यकता होती है। उदाहरण के लिए:
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% -webkit-एनीमेशन-नाम: cssanim / * पुराने ब्राउज़र * / -webkit- एनीमेशन-अवधि: 5s / पुराने ब्राउज़र * / एनीमेशन -name: cssanim एनीमेशन-अवधि: 5s} / * पुराने ब्राउज़र्स * / @ -webkit-keyframes cssanim {0% {वाम: 0px} 100% {बाएँ: 300px}} @keyframes के cssanim {0% {बाएँ: 0px} 100 % {बाएँ: 300px}}हम ऊपर से नमूना html पृष्ठ का उपयोग कर सकते हैं और आगे के उदाहरणों को आज़माने के लिए स्टाइल टैग में CSS कोड को बदल सकते हैं।
CSS में keyframes
यह CSS में एनिमेशन का बिल्डिंग ब्लॉक है। यह हमारे वेबपेज पर एनीमेशन के विशिष्ट क्षणों और शैलियों को परिभाषित करता था। दूसरे शब्दों में, जब हम अपने CSS के अंदर @keyframes निर्दिष्ट करते हैं, तो यह एक निश्चित अवधि के लिए वर्तमान स्थिति को एक नई स्थिति में बदलने या वस्तुओं को चेतन करने के लिए नियंत्रण प्राप्त करता है।
एनीमेशन को नियंत्रित करने के लिए @keyframes के कुछ गुण होने चाहिए, जैसे एनीमेशन का नाम, स्टेज, और गुण।
नाम - इसके व्यवहार का वर्णन करने के लिए हर एनीमेशन के लिए एक नाम होना आवश्यक है।
मंचन - चरण एक एनीमेशन के पूरा होने का प्रतिनिधित्व करता है। इसे या तो 'से' और 'से' कीवर्ड के रूप में या प्रतिशत के रूप में चिह्नित किया जा सकता है, जबकि 0% शुरुआत की स्थिति का प्रतिनिधित्व करता है और 100% एक एनीमेशन की अंतिम स्थिति का प्रतिनिधित्व करता है। प्रतिशत प्रतिनिधित्व का उपयोग करने का लाभ यह है कि हम बीच में कई मध्यवर्ती चरणों को परिभाषित कर सकते हैं यानी 50% चरण या 75% आदि पर एनीमेशन का व्यवहार क्या होना चाहिए।
गुण - ये गुण हमें एनीमेशन के दौरान उन्हें हेरफेर करने के लिए @keyframes पर नियंत्रण देते हैं।
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 5s} @keyframes cssanim {0% {परिवर्तन: पैमाने (0.5%) अस्पष्टता: 0} 50 % {ट्रांसफ़ॉर्म: स्केल (१.५) अपारदर्शिता: १} १००% {ट्रांसफ़ॉर्म: स्केल (१)}}अब चूंकि हम keyframes को परिभाषित करने के बारे में स्पष्ट हैं। आइए हम एनीमेशन गुणों का पता लगाएं, यह वर्णन करने के लिए कि हमारे तत्वों और वस्तुओं को कैसे चेतन करें। दो संपत्ति यानी इनहेरिट और प्रारंभिक का उपयोग सभी एनीमेशन प्रकारों के साथ किया जा सकता है। ये गुण आम तौर पर विभिन्न व्यवहारों को प्रदर्शित करने के लिए div टैग के साथ उपयोग किए जाते हैं।
प्रारंभिक: इस गुण को इसके डिफ़ॉल्ट मान पर सेट करता है।
विरासत: इस संपत्ति को इसके मूल तत्व से विरासत में मिला है।
एनिमेशन गुण
- एनीमेशन-नाम
यह एनीमेशन के नाम को निर्दिष्ट करता है, जिसका उपयोग @keyframes में हेरफेर करने के लिए किया जाता है।संभावित मूल्य हैं:
- नाम: यह एनीमेशन के लिए कीफ़्रेम से जुड़ने के लिए नाम निर्दिष्ट करता है।
- कोई नहीं: यह डिफ़ॉल्ट मान है और इसका उपयोग वंशानुगत या कैस्केडिंग एनिमेशन को ओवरराइड करने के लिए किया जा सकता है।
वाक्य - विन्यास:
एनीमेशन-नाम: नाम | कोई नहीं | प्रारंभिक | विरासत में मिला
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 5s} @keyframes cssanim {0% {वाम: 0px} 100x {बाएं: 300px} }- एनीमेशन-अवधि
यह एक निष्पादन को पूरा करने के लिए एक एनीमेशन के लिए लगने वाले समय को निर्दिष्ट करता है। इसे सेकंड या मिलीसेकंड (जैसे, 4 या 400 मी) में परिभाषित किया गया है। इस संपत्ति का डिफ़ॉल्ट मान 0s है, इसलिए यदि यह गुण निर्दिष्ट नहीं है, तो एनीमेशन नहीं होगा।
वाक्य - विन्यास:
एनीमेशन-अवधि: समय
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: नीली स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 4s} @keyframes cssanim {0% {परिवर्तन: स्केल (0.4) अस्पष्टता: 0} 50 % {ट्रांसफ़ॉर्म: स्केल (१.४) अपारदर्शिता: १} १००% {ट्रांसफ़ॉर्म: स्केल (१)}}- एनीमेशन-देरी
एनीमेशन-देरी की संपत्ति हमें एनीमेशन में देरी को निर्दिष्ट करने की अनुमति देती है। यह परिभाषित करता है कि एनीमेशन अनुक्रम कब शुरू होगा।
इस संपत्ति का मूल्य कुछ सेकंड (सेकंड) या मिलीसेकंड (एमएस) में घोषित किया जा सकता है। यह सकारात्मक और नकारात्मक दोनों मूल्यों को धारण कर सकता है। एक सकारात्मक मूल्य इंगित करता है कि एनीमेशन निर्दिष्ट समय बीतने के बाद शुरू होगा और तब तक यह एकमत नहीं रहेगा। दूसरी ओर, एक नकारात्मक मान तुरंत एनीमेशन को बिंदु से शुरू कर देगा जैसे कि यह पहले से ही एक निर्दिष्ट समय सीमा के लिए निष्पादित कर रहा है।
वाक्य - विन्यास:
एनीमेशन-देरी: समय
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 4 जी एनीमेशन-विलंब: 4s} @keyframes cssanim {0% {वाम: 0px} 100% {बाएं: 250px}}- एनीमेशन-पुनरावृत्ति-गणना
यह गुण इंगित करता है कि एनीमेशन अनुक्रम कितनी बार खेला जाना चाहिए। इस गुण का डिफ़ॉल्ट मान 1 है।संभावित मूल्य हैं:
- संख्या - पुनरावृत्तियों की संख्या को दर्शाता है
- अनंत - इंगित करता है कि एनीमेशन को हमेशा के लिए दोहराना चाहिए
वाक्य - विन्यास:
एनीमेशन-पुनरावृति-गणना: संख्या | अनंत
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 2s एनीमेशन-पुनरावृत्ति-गणना: 4} @keyframes cssanim {0x {वाम: 0px} 100% {वाम: 100px}}- एनीमेशन-दिशा
यह एनीमेशन की दिशा को परिभाषित करता है। तत्व की दिशा आगे, पीछे या वैकल्पिक चक्रों में खेलने के लिए सेट की जा सकती है।इस संपत्ति का डिफ़ॉल्ट मूल्य सामान्य है, और यह प्रत्येक चक्र पर रीसेट हो जाता है।संभावित मूल्य हैं:
सामान्य - यह डिफ़ॉल्ट व्यवहार है और एनीमेशन आगे खेला जाता है। प्रत्येक चक्र के बाद एनीमेशन अपनी प्रारंभिक स्थिति में आ जाता है और फिर से आगे खेला जाता है
उलटना - एनीमेशन को पीछे की दिशा में खेला जाता है। प्रत्येक चक्र के बाद एनीमेशन अपनी अंतिम स्थिति में आ जाता है और उसे पीछे की ओर खेला जाता है
वैकल्पिक - एनीमेशन की दिशा उलट है यानी यह पहले हर चक्र पर और फिर पीछे की ओर खेलता है। हर विषम चक्र आगे एनीमेशन प्रदान करता है और हर चक्र पिछड़े आंदोलन प्रदान करता है।
वैकल्पिक-उल्टा - एनीमेशन की दिशा को बारी-बारी से उलटा किया जाता है। यहाँ एनीमेशन पहले पिछड़े और फिर हर चक्र पर आगे खेला जाता है। हर विषम चक्र पीछे या पीछे की ओर बढ़ता है और हर चक्र आगे के एनीमेशन को प्रस्तुत करता है।
वाक्य - विन्यास:
एनीमेशन-दिशा: सामान्य | उल्टा |वैकल्पिक | वैकल्पिक-उल्टा
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 2s एनीमेशन-पुनरावृत्ति-गणना: अनंत} @keyframes cssanim (0% {वाम: 0px} 100% {वाम: 100px}}- एनीमेशन-समय-समारोह
यह गुण गति वक्र या एनीमेशन की चाल शैली निर्धारित करता है। एनीमेशन शैली में परिवर्तन को एक रूप से दूसरे रूप में सुचारू रूप से करने के लिए इसे सौंपा गया है। यदि कोई मूल्य नहीं दिया जाता है तो यह आसानी से चूक जाता है।एनीमेशन-टाइमिंग-फंक्शन के लिए संभावित मान हैं:
सहजता - यह संपत्ति का डिफ़ॉल्ट मूल्य है। यहां एनीमेशन धीमा शुरू होता है, धीरे-धीरे बीच में तेज हो जाता है और फिर धीरे-धीरे समाप्त होता है।
रेखीय - एनीमेशन पूरे चक्र में एक ही गति को बनाए रखता है यानी शुरू से अंत तक।
आराम से - एनीमेशन धीरे-धीरे शुरू होता है।
आराम करो - एनीमेशन धीरे-धीरे समाप्त होता है।
आसानी से अंदर-बाहर - एनीमेशन शुरू और अंत दोनों के दौरान धीरे-धीरे चलता है।
क्यूबिक-बेज़ियर (एन, एन, एन, एन) - यह उन्नत सुविधा हमें अपने स्वयं के मूल्यों को परिभाषित करके एक कस्टम टाइमिंग फ़ंक्शन बनाने देती है। संभावित मान 0 से 1 तक होता है।
वाक्य - विन्यास:
एनीमेशन-टाइमिंग-फ़ंक्शन: रैखिक | आसानी | सहजता | सहजता | आसानी से अंदर |क्यूबिक-बेज़ियर (एन, एन, एन, एन)
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 2s एनीमेशन-दिशा: रिवर्स} @keyframes cssanim {0% {पृष्ठभूमि: नारंगी छोड़ दिया: 0px } 50% {बैकग्राउंड: यलो लेफ्ट: 200px टॉप: 200px} 100% {बैकग्राउंड: ब्लू लेफ्ट: 100px}}- एनीमेशन-भरण मोड
यह एक विशेष गुण है क्योंकि यह एनीमेशन शैली को निर्धारित करता है कि एनीमेशन से पहले या बाद में खेला जाता है।डिफ़ॉल्ट रूप से, तत्व की शैली शुरुआत से पहले या समाप्त होने के बाद एनीमेशन से प्रभावित नहीं होती है। यह गुण उपयोगी है क्योंकि यह एनीमेशन के इस डिफ़ॉल्ट व्यवहार को ओवरराइड करने में मदद करता है।एनीमेशन-भरण-मोड संपत्ति के लिए संभावित मूल्य निम्नलिखित हैं:
कोई नहीं - यह प्रॉपर्टी का डिफॉल्ट वैल्यू है यानी ऐनिमेशन स्टाइल्स को ऐनिमेशन से पहले या बाद में एलिमेंट पर लागू नहीं किया जाता है।
आगे की ओर - शैलियों को अंतिम एनीमेशन अनुक्रम में तत्व द्वारा बनाए रखा जाता है यानी एनीमेशन समाप्त होने के बाद।
पीछे की ओर - शैलियों को प्रारंभिक एनीमेशन अनुक्रम में तत्व द्वारा बनाए रखा जाता है यानी एनीमेशन से पहले विशेष रूप से एनीमेशन देरी के दौरान घूरते हैं।
दोनों - यह दर्शाता है कि एनीमेशन दोनों दिशाओं में अर्थात् आगे और पीछे दोनों का अनुसरण करेगा
वाक्य - विन्यास:
एनिमेशन-फिल-मोड: कोई नहीं | आगे की ओर | पीछे की ओर | दोनों
विंडोज़ 10 पर php स्थापित करना
.anim {चौड़ाई: 50px ऊंचाई: 50px पृष्ठभूमि: हल्के रंग: सफेद फ़ॉन्ट-वजन: बोल्ड स्थिति: सापेक्ष एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 5s एनीमेशन-पुनरावृत्ति-गणना: अनंत सीमा-त्रिज्या: 100% # anim1 { एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी} # एनीम 2 {एनीमेशन-टाइमिंग-फ़ंक्शन: रैखिक} # एनीम 3 {एनीमेशन-टाइमिंग-फ़ंक्शन: ईज़ी-इन} # एनीम 4 {एनीमेशन-टाइमिंग-फ़ंक्शन: ईज़ी-आउट} # एनीम 5 {एनीमेशन- समयावधि-समारोह: आसानी से-बाहर} @keyframes cssanim {{बाएँ: 0px} से {बाएँ: 400px}}- एनीमेशन-प्ले-स्टेट
यह संपत्ति एक एनीमेशन को निर्दिष्ट करती है जो या तो खेलने या रोकी गई स्थिति में है। इसके अलावा, जब एक एनीमेशन को पॉज़ से फिर से शुरू किया जाता है तो यह वहीं से शुरू होता है जहां इसे छोड़ा था।संभावित मूल्य हैं:
- खेल रहे हैं - चलाने में एनीमेशन को रेंडर करने के लिए
- रोके गए - पॉज अवस्था में एनीमेशन रेंडर करने के लिए।
वाक्य - विन्यास:
एनीमेशन-प्ले-स्टेट: रोका गया | खेल रहे हैं
.anim {चौड़ाई: 100px ऊंचाई: 100px पृष्ठभूमि: लाइटब्लू स्थिति: रिश्तेदार एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 3s एनीमेशन-देरी: 2s एनीमेशन-भरण-मोड: पीछे की ओर सीमा-त्रिज्या: 100%} @keycssss {0% {शीर्ष: 0px पृष्ठभूमि-रंग: नारंगी} 50% {शीर्ष: 0px पृष्ठभूमि-रंग: हरा} 100% {शीर्ष: 100pxbackground- रंग: नीला}}- एनीमेशन
इसे एनीमेशन शॉर्टहैंड प्रॉपर्टी के रूप में जाना जाता है। इसका उपयोग क्लीनर कोड के लिए किया जाता है। एक बार जब हम सभी एनीमेशन गुणों के आदी हो जाते हैं, तो यह सलाह दी जाती है कि हम एक ही पंक्ति में सभी कोडों को तेजी से कोडित करने और परिभाषित करने के लिए एनीमेशन शॉर्टहैंड का उपयोग करें।
वाक्य - विन्यास:
एनीमेशन: [एनीमेशन-नाम] | [एनीमेशन-अवधि] | [एनीमेशन-टाइमिंग-फंक्शन] |[एनीमेशन-देरी] | [एनीमेशन-पुनरावृति-गणना] | [एनीमेशन-दिशा] |[एनीमेशन-भरण-मोड] | [एनीमेशन-प्ले-स्टेट]
सभी एनीमेशन प्रभाव जो हम विभिन्न एनीमेशन गुणों का उपयोग करके ऊपर दिखाते हैं, शॉर्टहैंड का उपयोग करके प्राप्त किया जा सकता हैएनीमेशन संपत्ति।
.anim {ऊंचाई: 200px चौड़ाई: 200px पृष्ठभूमि: lightblue स्थिति: सापेक्ष सीमा-त्रिज्या: 100% एनीमेशन-नाम: cssanim एनीमेशन-अवधि: 2s एनीमेशन-दिशा: सामान्य एनीमेशन-प्ले-राज्य: रोका गया} @keyPassssss {0% {बैकग्राउंड: ऑरेंज टॉप: 0px} 50% {बैकग्राउंड: यलो लेफ्ट: 200px टॉप: 200px} 100% {बैकग्राउंड: ब्लू लेफ्ट: 100px}}यह उन सभी एनीमेशन गुणों का निष्कर्ष निकालता है जिनका उपयोग CSS में किया जा सकता है। हमें और अधिक स्पष्ट चित्र प्राप्त करने के लिए इन गुणों के विभिन्न रूपों की कोशिश करनी चाहिए। जब हम सहज हो जाते हैं, तो एनीमेशन शॉर्टहैंड संपत्ति क्लीनर और तेज कोड लिखने में बहुत मदद कर सकती है। यह वेब डेवलपर्स के लिए CSS में सीखने के लिए महत्वपूर्ण कौशल में से एक है। चूँकि हम स्थैतिक के बजाय गतिशील वस्तुओं पर अधिक ध्यान केंद्रित करते हैं, इसलिए एनिमेशन हमें इसे हासिल करने में मदद कर सकते हैं और महान उल्लेखनीय वेबपेज भी विकसित कर सकते हैं।
हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'CSS में एनिमेशन' ब्लॉग के कमेंट सेक्शन में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।