एक ही समय में एकाधिक सीएसएस एनिमेशन कैसे खेलें?

यह आलेख एक ही समय में एकाधिक सीएसएस एनिमेशन चलाने/जोड़ने के लिए एक व्यावहारिक प्रदर्शन प्रदर्शित करता है।

एक ही समय में एकाधिक सीएसएस एनिमेशन कैसे खेलें?

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

एक ही समय में एक से अधिक एनीमेशन चलाने/जोड़ने के लिए नीचे दी गई प्रक्रिया का पालन करें।

चरण 1: संरचना का निर्माण

सबसे पहले, एक HTML तत्व बनाएं जिसमें आने वाले चरणों में एनिमेशन लागू हो जाएं। उदाहरण के लिए, छवि डाली जा रही है:

उपरोक्त कोड स्निपेट में:

• सबसे पहले, छवि पथ 'पर सेट है स्रोत ' गुण।
• अगला, का मूल्य ' 100 पीएक्स ” CSS “चौड़ाई” और “ऊँचाई” गुणों को प्रदान किया जाता है।
• इसके अलावा, का मान सेट करें ' चेतन ' तक ' कक्षा ' गुण।

चरण 2: एनिमेशन की स्थापना

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

उपरोक्त कोड स्निपेट में:

• पहले ' @ -वेबकिट-कीफ़्रेम 'तंत्र स्थापित करने के लिए उपयोग किया जा रहा है' घुमाना ' और ' घुमाएँ ”एनीमेशन नामित।
• अगला, 'का उपयोग करें परिवर्तन 'संपत्ति जिसका मूल्य है' घुमाएँ () ' में ' घुमाना “एनीमेशन बॉडी। यह फ़ंक्शन तत्व को 'के कोण पर घुमाता है' 180 डिग्री ”।
• उसके बाद, उस एनीमेशन को सेट करें जो मूल तत्व को 'के एक कारक द्वारा बढ़ाता या बढ़ाता है' 1 'दोनों में' एक्स ' और ' और 'अक्ष' में पैमाना “एनीमेशन बॉडी।

चरण 3: HTML तत्वों पर एनिमेशन लागू करना

सीएसएस भाग के अंदर, वर्ग का चयन करें ' चेतन 'जो' को सौंपा गया है ” टैग करें, और निम्नलिखित सीएसएस गुण प्रदान करें:

उपरोक्त कोड ब्लॉक में प्रयुक्त गुणों का विवरण:

• सबसे पहले, का मान सेट करें ' शुद्ध 'सीएसएस के लिए' पद ' संपत्ति। यह संरेखित करता है ' आईएमजी ” एनीमेशन के अनुसार तत्व।
• फिर, के मान प्रदान करें 60% ”, “ 110 पीएक्स ' और ' 110 पीएक्स 'सीएसएस के लिए' बाएं ”, “ चौड़ाई ' और ' ऊंचाई ' गुण। इन गुणों का उपयोग किसी तत्व की स्थिति और आकार निर्धारित करने के लिए किया जाता है।
• उसके बाद, का मान सेट करें ' स्केल 3 एस अनंत रैखिक ' तक ' -वेबकिट-एनीमेशन 'सीएसएस संपत्ति।
• और यह ' 3s ” उस एनीमेशन की अवधि है, “ अनंत 'एनीमेशन की अवधि है, और' रेखीय ”एनीमेशन की दिशा है।
• अंत में, के मान प्रदान करें ' स्पिन 2 एस अनंत रैखिक 'सीएसएस के लिए' -वेबकिट-एनीमेशन ' संपत्ति। यह संपत्ति 'नाम का दूसरा एनीमेशन जोड़ती है' घुमाना ' पर ' आईएमजी ' तत्व।

उपरोक्त कोड ब्लॉक को संकलित करने के बाद, एनीमेशन इस तरह दिखता है:

उपरोक्त gif दर्शाता है कि केवल ' घुमाना एनीमेशन लक्षित तत्व पर चल रहा है।

चरण 4: HTML तत्वों पर एकाधिक एनिमेशन बजाना

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

इस समस्या को हल करने के लिए, लक्ष्य तत्व को किसी अन्य HTML तत्व से रैप करें. के रूप में ' डिव 'पहले चरण में पहले से ही एक आवरण के रूप में उपयोग किया जाता है, इसका चयन करें' अवधि ” और कोड को अपडेट करें जैसे:

उपरोक्त कोड में:

• सबसे पहले, ' चेतन ” वर्ग वही रहता है और उसमें से केवल दूसरा एनीमेशन हटा दिया जाता है जिसे “ अवधि ' कक्षा।
• उसके बाद, 'का उपयोग करके स्थिति निर्धारित करें पद ' और ' ऊपर ' गुण।

उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज अब इस तरह दिखाई देता है:

आउटपुट से पता चलता है कि दोनों एनिमेशन एक ही समय में चयनित HTML तत्व पर लागू किए गए हैं।

निष्कर्ष

एकाधिक सीएसएस गुणों को लागू करने के लिए, तत्व को HTML तत्वों के साथ लपेटें और उन पर एनिमेशन लागू करें ताकि प्रत्येक HTML तत्व में एक ही एनीमेशन हो। जैसा कि बाल संपत्ति मूल HTML तत्व पर लागू एनीमेशन को प्राप्त करती है, संकलक के लिए त्रुटियों या अस्पष्टता के बिना कई एनिमेशन लागू होते हैं। एक ही समय में एक से अधिक सीएसएस एनीमेशन चलाने/जोड़ने की यही प्रक्रिया है।