HTML भाषा वेब पेज की संरचना प्रदान करती है, और CSS उस एप्लिकेशन का डिज़ाइन और स्वरूपण प्रदान करता है। यह संयोजन आपको एनीमेशन जोड़ने की भी अनुमति देता है, क्योंकि एनिमेटेड तत्व स्थिर तत्वों की तुलना में अधिक आकर्षक लगते हैं। यह तत्व को धीरे-धीरे अपनी शैली बदलने की सुविधा भी देता है।
यह लेख मार्गदर्शन करेगा कि हम तत्वों पर एनीमेशन कैसे लागू कर सकते हैं। तो चलिए शुरू करते हैं!
CSS एनिमेशन कीफ़्रेम क्या हैं?
एनीमेशन पूरा करने के लिए, हमें एनीमेशन को HTML तत्व से बांधना होगा। इस प्रयोजन के लिए, कीवर्ड का उपयोग करें ' @कीफ्रेम ” एनीमेशन नाम के बाद। यह घटक एनीमेशन के प्रारंभ और अंत को निर्दिष्ट करता है।
CSS एनिमेशन कीफ़्रेम कैसे सेट करें?
CSS में एनीमेशन keyframes सेट अप करने के लिए, हम दो उदाहरणों से गुजरेंगे।
उदाहरण 1
CSS में एनीमेशन कीफ़्रेम सेट अप करने के लिए, निम्न चरणों का पालन करें:
-
- एक जोड़ें जिसका वर्ग नाम हो ' मुख्य-विभाग ”।
- Div के अंदर, वर्ग नाम के साथ एक और div जोड़ें ' img-पेंग ”।
- इस img-peng div के अंदर, छवि को रखने के लिए
जोड़ें। इस टैग की तीन विशेषताएँ हैं, ' स्रोत छवि पथ प्रदान करने के लिए विशेषता, ' हर चीज़ ” वैकल्पिक पाठ है जो छवि प्रदर्शित नहीं होने पर जोड़ा जाता है, और “ चौड़ाई छवि की चौड़ाई प्रदान करने के लिए विशेषता।
एचटीएमएल
< डिव कक्षा = 'मेन-डिव' >
< डिव कक्षा = 'आईएमजी-पेंग' >
< आईएमजी स्रोत = 'छवियां/पेंगुइन.पीएनजी' हर चीज़ = 'पेंगुइन' चौड़ाई = '100' >
डिव >
डिव >
.मुख्य-विभाग {
सीएसएस
चौड़ाई: 90 % ;
ऊंचाई: 90 पीएक्स;
पृष्ठभूमि-रंग: आरजीबी ( 67 , 66 , 87 ) ;
मार्जिन: 20 पीएक्स ऑटो;
पैडिंग: 10 पीएक्स;
}
सीएसएस में, ' .मुख्य-विभाग ' div क्लास को एक्सेस करने के लिए जोड़ा जाता है। इसके लिए लागू गुणों को नीचे समझाया गया है:-
- ' चौड़ाई 'संपत्ति मान div की चौड़ाई को परिभाषित करता है।
- ' कद 'संपत्ति का उपयोग div की ऊंचाई निर्धारित करने के लिए किया जाता है।
- ' पीछे का रंग ” संपत्ति तत्व की पृष्ठभूमि पर रंग लागू करती है।
- ' अंतर '' के रूप में सेट किया गया है 20 पीएक्स कार ”, जो ऊपर और नीचे से स्थान को इंगित करता है, और ऑटो का अर्थ है बाएँ और दाएँ से समान स्थान।
- ' गद्दी ” गुण मान को 10px के रूप में निर्दिष्ट किया गया है, जो तत्व की सामग्री के चारों ओर स्थान लागू करता है।
स्टाइल आईएमजी-पेंग क्लास
.img-पेंग {
चौड़ाई: 50 पीएक्स;
ऊंचाई: 100 पीएक्स;
स्थिति: रिश्तेदार;
एनिमेशन: शेक;
एनिमेशन-अवधि: 2s;
एनिमेशन-टाइमिंग-फ़ंक्शन: 2s;
एनीमेशन-पुनरावृत्ति-गिनती: अनंत;
}
' .img-पेंग ” का उपयोग उपरोक्त HTML फ़ाइल में उल्लिखित div क्लास तक पहुँचने के लिए किया जाता है। इस div तत्व को नीचे चर्चा की गई संपत्तियों के साथ स्टाइल किया गया है:-
- ' चौड़ाई 'संपत्ति मूल्य का उपयोग तत्व की चौड़ाई निर्धारित करने के लिए किया जाता है।
- ' कद 'संपत्ति मान का उपयोग तत्व की ऊंचाई निर्धारित करने के लिए किया जाता है।
- ' स्थान 'संपत्ति मान असाइन किया गया है' रिश्तेदार ”, जिसका अर्थ है कि यह अपनी सामान्य स्थिति के सापेक्ष स्थित होगा।
- ' एनीमेशन 'नाम दिया गया है' हिलाना ”। हालाँकि, आप आवश्यकता के अनुसार एनीमेशन का नाम दे सकते हैं।
- ' एनीमेशन-अवधि ” एनीमेशन की अवधि का प्रतिनिधित्व करता है, जो 2 सेकंड है।
- ' एनीमेशन-टाइमिंग-फ़ंक्शन ” को 2s का मान दिया गया है जिसका अर्थ है कि 2 सेकंड में एनीमेशन पूरा हो गया है।
- ' एनीमेशन-पुनरावृत्ति-गिनती ” अनंत के रूप में सेट है, जिसका अर्थ है कि यह एनीमेशन अनंत समय में घटित होगा।
@keyframes को कीवर्ड के साथ और से परिभाषित करें
@ keyframes हिला {
से {
शीर्ष: 50 पीएक्स;
}
प्रति {
मार्जिन-बॉटम: 200 पीएक्स;
}
}
इमेज पर सेट किए गए ऐनिमेशन के मुख्य-फ़्रेम का विवरण नीचे दिया गया है:-
- ' @कीफ्रेम शेक ” एनीमेशन नाम शेक को संदर्भित करता है जिसके बाद कीवर्ड @keyframes होता है। इस नियम के अंतर्गत एनिमेशन के व्यवहार को निर्दिष्ट किया जाता है।
- इसके घुंघराले ब्रैकेट के अंदर, ' से ' तथा ' प्रति ”कीवर्ड एनीमेशन व्यवहार को परिभाषित करने के लिए अलग-अलग अंतराल निर्दिष्ट करते हैं।
- ' ऊपर ” संपत्ति को 50px का मान दिया गया है, जिसका अर्थ है कि एनीमेशन स्क्रीन के शीर्ष से 50px से शुरू होता है और नीचे 200px तक जारी रहता है।
परिणामस्वरूप, आप निम्न आउटपुट देखेंगे:
अब, एनीमेशन को अलग-अलग अंतराल पर अलग-अलग व्यवहार करने दें। ऐसा करने के लिए, @keyframes में एनिमेशन प्रतिशत का उपयोग करें।प्रतिशत के साथ @keyframes निर्दिष्ट करें
@ keyframes हिला {
0 % {
बाएं: -50 पीएक्स ;
}
25 % {
बायां: 50 पीएक्स;
}
पचास % {
बाएं: -25 पीएक्स ;
}
75 % {
बायां: 25 पीएक्स;
}
100 % {
बायां: 10 पीएक्स;
}
}
तो, उपरोक्त कोड स्निपेट का विवरण यहां उल्लिखित है:-
- प्रतिशत मान 0%, 25%, 50%, 75% और 100% विभिन्न अंतरालों पर एनीमेशन का प्रतिनिधित्व करते हैं।
- इसके अलावा, 0% पर, छवि के बाईं ओर का स्थान 'होगा' -50 पीएक्स ”। 25% पर, बाईं ओर का स्थान 'होगा' 50 पीएक्स ”। 50% पर, बाईं ओर का स्थान 'होगा' -25 पीएक्स ”। 75% पर, बायां स्थान 'होगा' 25 पीएक्स ”, और जब एनीमेशन (100%) पूरा हो जाता है, तो बाईं जगह 'हो जाएगी' 10 पीएक्स ”।
उपरोक्त कोड निम्नलिखित एनीमेशन प्रदर्शित करता है:
आइए एक और उदाहरण लेते हैं यह देखने के लिए कि हम छवियों में एनिमेशन कैसे सेट कर सकते हैं।उदाहरण 2
HTML में, एक
जोड़ें जिसका वर्ग नाम ' मुख्य पृष्ठ ”। इसतत्व के अंदर, कक्षाओं के साथ दो और div टैग्स रखें “ बादल1 ' तथा ' Cloud2 ', क्रमश।एचटीएमएल
< डिव कक्षा = 'मुख्य पृष्ठ' >
< डिव कक्षा = 'क्लाउड1' >> डिव >
< डिव कक्षा = 'बादल 2' >> डिव >
डिव >
तन {
सीएसएस
अंतर: 0 ;
गद्दी: 0 ;
}
CSS में, हम बॉडी एलिमेंट को निम्नलिखित CSS गुण प्रदान करेंगे:-
- ' अंतर ' संपत्ति 0 के रूप में तत्व के आसपास कोई स्थान निर्दिष्ट नहीं करती है।
- ' गद्दी ' 0 मान वाली संपत्ति तत्व की सामग्री के आसपास कोई स्थान निर्दिष्ट नहीं करती है।
शैली मुख्य पृष्ठ div
।मुख्य पृष्ठ {
पृष्ठभूमि-छवि: url ( / इमेजिस / भेड़िया-रात। png ) ;
बैकग्राउंड-रिपीट: नो-रिपीट;
बैकग्राउंड-साइज़: कवर;
ऊंचाई: 100 वीएच;
स्थिति: रिश्तेदार;
बहुत ज्यादा गोपनीय;
}
यहां:-
- ' ।मुख्य पृष्ठ ' का उपयोग div क्लास तक पहुँचने के लिए किया जाता है।
- ' पृष्ठभूमि छवि 'संपत्ति मान असाइन किया गया है' url(/images/wolf-night.png) ” जहां छवियां वह फ़ोल्डर है जिसमें छवि wolf-night.png है।
- ' पृष्ठभूमि दोहराएँ 'संपत्ति मान असाइन किया गया है' कोई दोहराने , जिसका अर्थ है कि छवि एक बार प्रदर्शित की जाएगी।
- ' पृष्ठभूमि-आकार '' के रूप में सेट किया गया है ढकना ' पूरे div तत्व को भरने के लिए।
- ' कद ” 100vh है जो व्यूपोर्ट की ऊंचाई का 100% है।
- ' स्थान ' के रूप में सापेक्ष छवि स्थिति को उसके वर्तमान स्थान के सापेक्ष सेट करता है।
- ' बाढ़ 'प्रॉपर्टी का मान इमेज के उस हिस्से को छिपाने के लिए छिपाया गया है जो कंटेनर में फिट होने के लिए बहुत बड़ा है।
स्टाइल क्लाउड1 क्लास
.बादल1 {
पृष्ठभूमि-छवि: url ( / इमेजिस / क्लाउड.पीएनजी ) ;
पृष्ठभूमि-आकार: शामिल;
बैकग्राउंड-रिपीट: नो-रिपीट;
स्थिति: निरपेक्ष;
शीर्ष: 100 पीएक्स;
चौड़ाई: 500 पीएक्स;
ऊंचाई: 300 पीएक्स;
एनिमेशन: क्लाउडएनीमेशन1;
एनिमेशन-अवधि: 70s;
एनीमेशन-पुनरावृत्ति-गिनती: अनंत;
}
निम्नलिखित समझाए गए गुणों के साथ div वर्ग क्लाउड 1 लागू किया गया है:-
- ' .बादल1 ' का उपयोग div वर्ग क्लाउड 1 तक पहुँचने के लिए किया जाता है।
- ' पृष्ठभूमि छवि ” संपत्ति को url(/images/cloud.png) के रूप में सेट किया गया है, जहां छवियां छवि क्लाउड.png वाले फ़ोल्डर हैं।
- ' पृष्ठभूमि-आकार 'मूल्य के साथ' शामिल होना ” छवि की दृश्यता सुनिश्चित करता है।
- ' पृष्ठभूमि दोहराएँ ' के रूप में सेट मूल्य के साथ संपत्ति ' कोई दोहराने ” छवि को गैर-दोहराए गए के रूप में प्रदर्शित करता है।
- ' स्थान ' अपने मूल तत्व के सापेक्ष छवि को निरपेक्ष स्थिति के रूप में।
- ' ऊपर ” संपत्ति छवि को ऊपर से 100px पर सेट करती है।
- ' चौड़ाई 'संपत्ति का उपयोग div तत्व की चौड़ाई को 500px पर सेट करने के लिए किया जाता है।
- ' कद 'संपत्ति का उपयोग div तत्व की ऊंचाई को 300px पर सेट करने के लिए किया जाता है।
- ' एनीमेशन ” को क्लाउडएनीमेशन1 नाम दिया गया है।
- ' एनीमेशन-अवधि ” एनीमेशन की अवधि का प्रतिनिधित्व करता है, जो 70 सेकंड है।
- ' एनीमेशन-पुनरावृत्ति-गिनती ” को मान अनंत दिया गया है, जो एनीमेशन को अनंत बार पुनरावृत्त करेगा।
अब तक, हमने CSS गुणों को div वर्ग के मुख्य पृष्ठ और क्लाउड1 पर लागू किया है। अब, अगले भाग में, हम क्लाउड2 नाम की अगली डिव क्लास को स्टाइल करेंगे।
स्टाइल क्लाउड2 क्लास
.बादल2 {
पृष्ठभूमि-छवि: url ( / इमेजिस / क्लाउड.पीएनजी ) ;
पृष्ठभूमि-आकार: शामिल;
बैकग्राउंड-रिपीट: नो-रिपीट;
स्थिति: निरपेक्ष;
शीर्ष: 50 पीएक्स;
चौड़ाई: 200 पीएक्स;
ऊंचाई: 300 पीएक्स;
एनिमेशन: क्लाउडएनीमेशन2;
एनीमेशन-अवधि: 15s;
एनीमेशन-पुनरावृत्ति-गिनती: अनंत;
}
Div क्लास क्लाउड 2 को उन गुणों के साथ लागू किया जाता है जिन्हें नीचे समझाया गया है:-
- ' .बादल2 ” का उपयोग क्लास क्लाउड 2 तक पहुँचने के लिए किया जाता है।
- ' पृष्ठभूमि छवि ” संपत्ति url(/images/cloud.png) के रूप में सेट है, जहां छवि एक फ़ोल्डर है जिसमें छवि क्लाउड.png है।
- ' पृष्ठभूमि-आकार ” में एक मान होता है जो छवि की दृश्यता सुनिश्चित करता है।
- ' पृष्ठभूमि दोहराएँ 'नो-रिपीट के रूप में सेट वैल्यू के साथ प्रॉपर्टी इमेज को नॉन-रिपीट के रूप में प्रदर्शित करती है।
- ' स्थान ' अपने मूल तत्व के सापेक्ष छवि को निरपेक्ष स्थिति के रूप में।
- ' ऊपर ” संपत्ति छवि को ऊपर से 100px पर सेट करती है।
- ' चौड़ाई 'संपत्ति का उपयोग div तत्व की चौड़ाई निर्धारित करने के लिए किया जाता है।
- ' कद 'संपत्ति का उपयोग div तत्व की ऊंचाई निर्धारित करने के लिए किया जाता है।
- ' एनीमेशन ” को क्लाउडएनीमेशन2 नाम दिया गया है।
- ' एनीमेशन-अवधि ” एनीमेशन की अवधि का प्रतिनिधित्व करता है।
- ' एनीमेशन-पुनरावृत्ति-गिनती ” को मान अनंत दिया गया है, जो एनीमेशन को अनंत बार पुनरावृत्त करेगा।
Cloudanimation1 के लिए @keyframes निर्दिष्ट करें
@ मुख्य-फ़्रेम क्लाउड एनिमेशन1 {
प्रति {
बायां: 0 पीएक्स;
}
से {
बाएं: 100 % ;
}
}
Cloud1 div एनीमेशन से बंधा हुआ है जिसका वर्णन नीचे किया गया है:-
- ' @कीफ्रेम क्लाउडएनीमेशन1 ”एनीमेशन क्लाउडएनिमेशन 1 का नाम कीवर्ड @keyframes द्वारा पीछा किया जाता है जिसका उपयोग संक्रमण को निर्दिष्ट करने के लिए किया जाता है।
- @keyframes कीवर्ड निर्दिष्ट करता है कि क्लाउड छवियों पर शुरू से अंत तक एनीमेशन कैसे किया जाता है।
- ' प्रति ' तथा ' से ”कीवर्ड निर्दिष्ट करते हैं कि क्लाउड1 स्क्रीन के 100% से 0px पर चला जाएगा।
Cloudanimation2 के लिए @keyframes निर्दिष्ट करें
@ मुख्य-फ़्रेम क्लाउडएनीमेशन2 {
0 % {
बाएं: 0 % ;
}
100 % {
बाएं: 100 % ;
}
}
Div क्लास क्लाउड 2 एनीमेशन से जुड़ा है जिसे नीचे समझाया गया है:-
- ' @कीफ़्रेम क्लाउडएनीमेशन2 ” एनीमेशन नाम क्लाउडएनीमेशन 2 का प्रतिनिधित्व करता है जिसके बाद @keyframes कीवर्ड होता है जिसका उपयोग एनीमेशन निर्दिष्ट करने के लिए किया जाता है।
- ' 0% ' तथा ' 100% ” एनीमेशन के प्रारंभ और अंत का प्रतिनिधित्व करते हैं।
- एनिमेशन के 0% पर, क्लाउड 0% के रूप में सेट मान के साथ बाईं ओर होगा, और यह धीरे-धीरे चौड़ाई के 100% तक चला जाएगा।
उत्पादन
यह अच्छा है! हमने चर्चा की है कि कैसे हम कीवर्ड @keyframes का सफलतापूर्वक उपयोग करके तत्वों को एनीमेशन निर्दिष्ट कर सकते हैं।निष्कर्ष
CSS हमें HTML Elements में Styles को लागू करने की अनुमति देता है। CSS में एनीमेशन एक शैली से दूसरी शैली में परिवर्तन करता है। इसमें दो घटक होते हैं, एनिमेशन शैलियाँ और मुख्य-फ़्रेम। एनीमेशन शैलियाँ विभिन्न गुणों का प्रतिनिधित्व करती हैं जैसे कि उनका नाम, एनीमेशन-अवधि, एनीमेशन-पुनरावृत्ति-गिनती, और बहुत कुछ। जबकि कीफ्रेम घटक एनीमेशन की शुरुआत और अंत को परिभाषित करता है। इस गाइड में उदाहरण के साथ बताया गया है कि एनिमेशन कीफ़्रेम कैसे सेट अप करें।
- एक