परिचय

आज मैं आपको बताऊंगा कि एनिमेशन कैसे बनाते हैं। हम इस पोस्ट में सभी आवश्यक एनीमेशन प्रॉपर्टी देखेंगे। आप मेरे जीथब पर कोड प्राप्त कर सकते हैं। तो चलो शुरू हो जाओ!!

एनिमेशन

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

एक बुनियादी एनीमेशन

पहला एनिमेशन: एक वर्ग का रंग बदलना

Square

यहां मैं नीले रंग का एक वर्ग बनाता हूं और फिर उसे कुछ स्टाइल देता हूं। आप कोई भी रंग ले सकते हैं!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

अब हम एक एनीमेशन बनाएंगे।

चरण 1: एनीमेशन बनाएं @keyframes

एनीमेशन बनाने के लिए आपको @keyframes सेट करना होगा। यह पकड़ता है कि आप एक निश्चित समय पर अपने तत्व को कौन सी शैलियाँ देना चाहते हैं और फिर आपको इसे एक नाम देने की आवश्यकता है। मैं अपने मामले में वर्ग का रंग बदल रहा हूँ। इसलिए, मैं इसे एक नाम रंग देता हूं। अब, आप @keyframes को दो प्रकार में लिख सकते हैं जैसे

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

यदि आप एक एनीमेशन करना चाहते हैं जिसमें दो चरण हैं तो आप आगे और पीछे का उपयोग कर सकते हैं। या आप इसे
जैसे प्रतिशत मान का उपयोग करके कर सकते हैं

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

प्रतिशत मानों का उपयोग तब किया जाता है जब आपको एनीमेशन में कई कार्य करने होते हैं लेकिन आप दोनों का उपयोग कर सकते हैं! मैं आमतौर पर एनीमेशन के लिए प्रतिशत मान का उपयोग करता हूं

चरण 2: वर्ग पर एनीमेशन गुण सेट करें।

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

• एनीमेशन-नाम - इसका उपयोग ब्राउज़र को यह बताने के लिए किया जाता है कि आप किस @keyframes का उपयोग करना चाहते हैं। मेरे मामले में, मेरे @keyframes का नाम रंग है।

• एनीमेशन-अवधि - इसका उपयोग यह बताने के लिए किया जाता है कि एनीमेशन कितने समय में समाप्त होना चाहिए।

• एनीमेशन-पुनरावृत्ति-गिनती - इसका उपयोग यह बताने के लिए किया जाता है कि इसे कितनी बार निष्पादित करना चाहिए।

आप एनीमेशन के बारे में w3school या किसी अन्य वेबसाइट पर अधिक जान सकते हैं। अब, हम एनीमेशन प्रॉपर्टी का उपयोग करेंगे लेकिन हम इसे इस तरह एक पंक्ति में लिखेंगे:

    animation: color 4s infinite;

सीएसएस में एनीमेशन में 7 संपत्तियां हैं। एनीमेशन प्रॉपर्टी को सिंगल लाइन में उपयोग करने के लिए, मैं पहले एनीमेशन-नाम लिखता हूं जो कि रंग है, फिर एनीमेशन-अवधि जो मेरे मामले में 4s है और फिर एनीमेशन-पुनरावृत्ति-गिनती को अनंत पर सेट करता हूं। यदि आप एनीमेशन का उपयोग केवल एक बार करना चाहते हैं, तो आप इसे 1 पर सेट कर सकते हैं। आप एनीमेशन प्रॉपर्टी के मान स्वयं भी निर्धारित कर सकते हैं।

अब, यदि आप अपना वर्ग देखेंगे, तो यह बार-बार अपना रंग बदल देगा! अब, हम रंग बदलते समय वर्ग को घुमाएँगे।

दूसरा एनीमेशन: रंग बदलते समय वर्ग को हिलाना!

इसके लिए मैं उसी वर्ग का उपयोग करूंगा और उसके लिए एक और @कीफ्रेम बनाऊंगा। हम पहले जैसे ही चरणों का उपयोग करेंगे

चरण 1: एनीमेशन बनाएं @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

यहां, मैं मूव नाम के साथ एक @कीफ्रेम बनाता हूं और इस एनीमेशन के लिए मैं तीन चरणों का उपयोग करता हूं। सबसे पहले मैंने बाएँ को 0px और एक पृष्ठभूमि-रंग पर सेट किया। फिर 50% पर मैंने बाएँ को 300px पर सेट किया और पृष्ठभूमि-रंग बदल दिया और अंत में, मैंने फिर से बाएँ को 0px पर सेट किया, ताकि यह पहले स्थान पर आ जाए।

चरण 2: वर्ग पर एनीमेशन गुण सेट करें

    animation: move 4s infinite;

यहां, मैंने एनीमेशन-नाम को स्थानांतरित करने के लिए सेट किया है, फिर एनीमेशन-अवधि को 4s और एनीमेशन-पुनरावृत्ति-गिनती को अनंत पर सेट किया है। फिर से आप अपनी पसंद के अनुसार एनीमेशन वैल्यू सेट कर सकते हैं। और पहली एनीमेशन प्रॉपर्टी पर टिप्पणी करना न भूलें अन्यथा चीजें गलत हो सकती हैं!

निष्कर्ष

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