तो, आपने एक समाप्त कर लिया है वेब विकास पाठ्यक्रम CSS एनिमेशन पर एक छोटे से खंड के साथ आपको html और css पढ़ाना जिससे आप बेहद उत्साहित हुए। अब आप सोच रहे हैं: "मैं एनिमेशन के बारे में और कहां सीख सकता हूं और अपनी अगली परियोजना में जीवन ला सकता हूं?"

सीएसएस एनीमेशन की खोज करते समय, मुझे शायद ही ट्यूटोरियल मिले और मुझे आश्चर्य हुआ कि क्या मेरे जैसे लोग थे, जो बिना जावास्क्रिप्ट के एनीमेशन ट्यूटोरियल की तलाश में थे। जावास्क्रिप्ट बहुत अच्छा है और जटिल एनिमेशन के लिए इस्तेमाल किया जा सकता है, लेकिन इसके लिए फिर से एक नई प्रोग्रामिंग भाषा सीखने की आवश्यकता है और मैं अपनी परियोजना को और अधिक गतिशील और आकर्षक बनाने के लिए सूक्ष्म एनिमेशन बनाना चाहता था।

तो, यहाँ सीएसएस एनीमेशन सीखने के लिए मेरे कुछ शीर्ष चयन हैं। पाठ्यक्रम विवरण पर जाने के लिए एक पर क्लिक करें:

अवधि	कार्यभार	संक्षिप्त
1. हैलो एनिमेशन (एचटीएमएल अकादमी)	1 घंटा	एनीमेशन को समझने के लिए सबसे अच्छा मुफ्त कोर्स
2. जेड खलीली (स्क्रिम्बा) के साथ सीएसएस एनीमेशन सीखें	2 घंटे	इंटरएक्टिव लर्निंग के माध्यम से उपलब्ध सर्वोत्तम मुफ्त कोर्स
3. अपने सीएसएस एनीमेशन कौशल का स्तर बढ़ाएं (डोनोवन हचिंसन)	3.5 घंटे	उदाहरणों के साथ सर्वश्रेष्ठ मुफ्त सीएसएस एनिमेशन कोर्स
4. सीएसएस एनीमेशन ट्यूटोरियल (नेट निंजा)	2 घंटे	सबसे अच्छा मुफ्त यूट्यूब कोर्स उपलब्ध है
5. सीएसएस: एनीमेशन (वैल हेड)	2 घंटे	लिंक्डइन कवरिंग एसवीजी एनीमेशन पर कुछ मुफ्त पाठ्यक्रमों में से एक
6. सीएसएस - मास्टरिंग एनिमेशन (ड्रिस बौमलिक)	13 घंटे	परियोजनाओं के साथ सबसे अच्छे भुगतान वाले पाठ्यक्रमों में से एक
7. रचनात्मक उन्नत सीएसएस एनिमेशन - 100 प्रोजेक्ट बनाएं! (अहमद सादेक)	13 घंटे	सीएसएस एनिमेशन से आपको परिचित कराने के लिए अधिक उन्नत प्रोजेक्ट
8. svg और css एनीमेशन - html और css (codewithsam) का उपयोग करना	2 घंटे	सीएसएस और जावास्क्रिप्ट के साथ उपलब्ध सर्वोत्तम भुगतान वाले एसवीजी एनीमेशन पाठ्यक्रमों में से एक
9. 5 html, css और js मिनी प्रोजेक्ट्स - स्क्रॉल एनीमेशन, रोटेटिंग नेविगेशन, ड्रैग इवेंट्स, आदि (ट्रैवर्सी मीडिया)	2 घंटे	सीएसएस और जावास्क्रिप्ट के साथ सबसे अच्छा यूट्यूब प्रोजेक्ट आधारित पाठ्यक्रम
10. जावास्क्रिप्ट खेल: सीएसएस संक्रमण और एनिमेशन के साथ इंटरैक्टिव प्रश्न (लर्नवेबकोड)	1 घंटा	इंटरैक्टिव गेम बनाने के लिए सीएसएस और जावास्क्रिप्ट का उपयोग करें
11। बोनस सामग्री (उन्नत एनिमेशन और उपकरण)	ना	अपने सीएसएस एनिमेशन बनाने में आपकी मदद करने के लिए संसाधनों और उपकरणों का एक संग्रह

सीएसएस एनिमेशन क्या हैं?

सीएसएस एनिमेशन कैस्केडिंग स्टाइल शीट के लिए एक प्रस्तावित मॉड्यूल है जो सीएसएस का उपयोग करके HTML दस्तावेज़ तत्वों के एनीमेशन की अनुमति देता है।

जब आप जावास्क्रिप्ट का उपयोग करके एनिमेशन बना सकते हैं तो आपको सीएसएस एनिमेशन क्यों सीखना चाहिए?

कई कारणों से जावास्क्रिप्ट पर सीएसएस एनिमेशन को प्राथमिकता दी जाती है जैसे:

1. प्रदर्शन: सीएसएस एनिमेशन आमतौर पर जावास्क्रिप्ट एनिमेशन की तुलना में अधिक चिकने और तेज़ होते हैं क्योंकि वे हार्डवेयर-त्वरित होते हैं और मुख्य जावास्क्रिप्ट थ्रेड के बजाय ब्राउज़र के कंपोज़िटर थ्रेड पर चलते हैं।
2. सादगी: सीएसएस एनिमेशन आमतौर पर जावास्क्रिप्ट एनिमेशन की तुलना में लागू करने और बनाए रखने में आसान होते हैं। सीएसएस के साथ, आप कोड की कुछ पंक्तियों के साथ तत्वों को चेतन कर सकते हैं, जबकि जावास्क्रिप्ट एनिमेशन के लिए अधिक जटिल तर्क और कोड की आवश्यकता होती है।
3. अभिगम्यता: css एनिमेशन को css से नियंत्रित किया जा सकता है और सहायक तकनीकों जैसे स्क्रीन रीडर्स के साथ उपयोगकर्ताओं के लिए सुलभ हैं। दूसरी ओर, जावास्क्रिप्ट एनिमेशन, सभी उपयोगकर्ताओं के लिए सुलभ नहीं हो सकते हैं।
4. ब्राउज़र समर्थन: सीएसएस एनिमेशन में अच्छा ब्राउज़र समर्थन है, जिसका अर्थ है कि वे अधिकांश आधुनिक ब्राउज़रों पर काम करते हैं। यह हमेशा जावास्क्रिप्ट एनिमेशन के मामले में नहीं होता है, क्योंकि कुछ ब्राउज़र कुछ जावास्क्रिप्ट सुविधाओं का समर्थन नहीं कर सकते हैं।

तो चलिए CSS के साथ कुछ एनीमेशन सीखते हैं।

सर्वोत्तम पाठ्यक्रम गाइड पद्धति

मैंने इस रैंकिंग को पिछले सर्वोत्तम पाठ्यक्रम मार्गदर्शिकाओं में उपयोग की गई अब आजमाई हुई कार्यप्रणाली के बाद बनाया है ( आप उन सभी को यहाँ पा सकते हैं ). इसमें तीन-चरणीय प्रक्रिया शामिल है:

1. शोध करना: मैंने क्लास सेंट्रल के डेटाबेस का लाभ उठाकर शुरुआत की 100k ऑनलाइन पाठ्यक्रम और 200k+ समीक्षाएं। फिर, मैंने रेटिंग, समीक्षा और बुकमार्क द्वारा 40 पाठ्यक्रमों का प्रारंभिक चयन किया।
2. मूल्यांकन करना: मैंने क्लास सेंट्रल, रेडिट और कोर्स प्रोवाइडर्स पर समीक्षाओं को पढ़ा ताकि यह समझा जा सके कि अन्य शिक्षार्थियों ने प्रत्येक कोर्स के बारे में क्या सोचा और इसे मेरे अपने अनुभव के साथ जोड़ा। सिखाने वाला .
3. चुनना: अच्छी तरह से बनाए गए पाठ्यक्रम चुने गए यदि वे मूल्यवान और आकर्षक सामग्री प्रस्तुत करते हैं और उन्हें मानदंडों के एक सेट में फिट होना है और तदनुसार रैंक किया जाना है: व्यापक पाठ्यक्रम, सामर्थ्य, रिलीज की तारीख, रेटिंग और नामांकन।

पाठ्यक्रम रैंकिंग आँकड़े

यहाँ रैंकिंग के बारे में कुछ समग्र आँकड़े दिए गए हैं:

• 15 हजार से ज्यादा लोग फॉलो कर रहे हैं एचटीएमएल और सीएसएस क्लास सेंट्रल पर।
• इस रैंकिंग के सभी पाठ्यक्रमों के लिए html/css के बुनियादी ज्ञान की आवश्यकता होती है।
• इस रैंकिंग में 7 पाठ्यक्रम हैं मुक्त , फ्री-टू-ऑडिट , या ले लो मुफ्त परीक्षण , जबकि बाकी का भुगतान किया जाता है।
• अधिकांश पाठ्यक्रम सीएसएस-एनीमेशन नौसिखियों के लिए उपयुक्त हैं।

आगे की हलचल के बिना, शीर्ष चयनों के माध्यम से चलते हैं।

1. हैलो एनिमेशन (एचटीएमएल अकादमी)

मेरी पहली पसंद है हैलो एनिमेशन पाठ्यक्रम की पेशकश की मुक्त एचटीएमएल अकादमी द्वारा। पाठ्यक्रम सिद्धांत और व्यवहार का मिश्रण है। आप कुछ बुनियादी एनीमेशन के साथ शुरू करते हैं और फिर कीफ़्रेम का उपयोग करके एक साथ कई वस्तुओं के एनिमेशन को हैंडल करते हैं।

इस पाठ्यक्रम के अंत तक आप मुख्य-फ़्रेम और बुनियादी और यहां तक ​​कि कुछ जटिल एनिमेशन बनाने से परिचित हो जाएंगे।

आप क्या सीखेंगे

आप घुमाना, स्लाइड करना, सरल वस्तुओं को बदलना और यहां तक ​​कि अंतरिक्ष में रॉकेट भेजना भी सीखेंगे। पाठ्यक्रम आपको 32 अभ्यास ट्यूटोरियल के साथ कीफ्रेम, प्री और पोस्ट एनीमेशन स्टेट्स और एनीमेशन टाइमिंग से परिचित कराएगा।

आप कैसे सीखेंगे

पाठ्यक्रम का एक सैद्धांतिक पक्ष और एक व्यावहारिक पक्ष है, आपको पहले अवधारणाओं को समझने के लिए कुछ सिद्धांत दिए जाएंगे और फिर आपने सिद्धांत में जो पढ़ा है उसका अभ्यास करने के लिए आगे बढ़ेंगे। सीएसएस एनीमेशन की मूल बातें से आपको परिचित कराने के लिए 32 व्यावहारिक अभ्यास हैं।

प्रदाता	एचटीएमएल अकादमी
स्तर	शुरुआत
कार्यभार	1 घंटा
प्रमाणपत्र	कोई नहीं

2. जेड खलीली (स्क्रिम्बा) के साथ सीएसएस एनीमेशन सीखें

यह स्क्रिम्बा द्वारा पेश किया जाने वाला एक प्रो कोर्स है। जद खलीली के साथ सीएसएस एनिमेशन सीखें यूट्यूब पर फ्री में उपलब्ध है। फ्रंट-एंड डेवलपमेंट करते समय आप वास्तविक दुनिया की समस्याओं को हल करके सीएसएस एनीमेशन सीखेंगे।

पाठ्यक्रम में बदलाव जोड़ने और उन्हें अनुकूलित करने के साथ-साथ एनिमेशन को परिभाषित करने और समय को नियंत्रित करने के लिए विभिन्न तकनीकों को शामिल किया गया है। पाठ्यक्रम स्केलिंग, अनुवाद, रोटेशन और तिरछा सहित विभिन्न प्रकार के परिवर्तन भी सिखाता है, और उन्हें तत्वों पर कैसे लागू किया जाए। इसके अतिरिक्त, यह एनीमेशन व्यवहार को नियंत्रित करने के लिए सीएसएस चर और समय कार्यों के उपयोग को शामिल करता है। यह क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए उपसर्गों के उपयोग को भी शामिल करता है। आप कुछ वास्तविक दुनिया की चुनौतियों के साथ पाठ्यक्रम में सीखी गई सभी बातों का परीक्षण और समीक्षा करने में सक्षम होंगे।

आप क्या सीखेंगे

पाठ्यक्रम आपको संक्रमण सिखाएगा, बदलाव को अनुकूलित करेगा और वास्तविक दुनिया संक्रमण चुनौती पर काम करेगा। यह फिर एक और वास्तविक दुनिया की चुनौती के साथ एनिमेशन में एनिमेशन और समय की व्याख्या करने के लिए आगे बढ़ेगा। अंतिम चुनौती परिवर्तन और अनुवाद के साथ लोगो पर काम करना और कस्टम टाइमिंग फ़ंक्शंस बनाना होगा।

आप कैसे सीखेंगे

आप वीडियो देखकर और प्रशिक्षक के साथ सामग्री का अनुसरण करके सीखेंगे।

संस्थान	scrimba
प्रदाता	यूट्यूब
प्रशिक्षक	जद खलीली
स्तर	मध्यम
कार्यभार	2 घंटे
दृश्य	30 हजार
को यह पसंद है	950 थम्स अप
प्रमाणपत्र	भुगतान (उनकी वेबसाइट पर)

मजेदार तथ्य

• पाठ्यक्रम एक भुगतान पाठ्यक्रम है और स्क्रिम्बा वेबसाइट पर अंतःक्रियात्मक रूप से पढ़ाया जाता है।
• स्क्रिम्बा में एक है कलह समुदाय .
• यह कोर्स पर भी उपलब्ध है scrimba .

3. अपने सीएसएस एनीमेशन कौशल का स्तर बढ़ाएं (डोनोवन हचिंसन)

यह मुक्त अवधि डोनोवन हचिंसन द्वारा बनाया गया था। यह कोर्स udemy पर सर्टिफिकेट के साथ पेड कोर्स के रूप में भी उपलब्ध है। पाठ्यक्रम मध्यवर्ती सीएसएस शिक्षार्थियों के लिए है।

आप क्या सीखेंगे

पाठ्यक्रम में विभिन्न प्रकार के एनिमेशन शामिल हैं जिनका उपयोग वेबसाइटों पर किया जा सकता है, जिनमें हीरो हेडर, टच और होवर एनिमेशन, स्क्रॉल एनिमेशन, हिंडोला और उत्तरदायी एनिमेशन शामिल हैं। यह प्रत्येक प्रकार के एनिमेशन बनाने के बारे में चरण-दर-चरण निर्देश प्रदान करता है, साथ ही संदर्भ के लिए डाउनलोड किए जा सकने वाले उदाहरण भी प्रदान करता है। लेख में पृष्ठभूमि को एनिमेट करने, शीर्षकों को प्रस्तुत करने, स्क्रॉल संकेतों को जोड़ने, मुख्य-फ़्रेम को सरल बनाने और हिंडोला को काम करने के लिए जावास्क्रिप्ट का उपयोग करने जैसे विषयों को शामिल किया गया है। यह इस बात पर भी चर्चा करता है कि फ़ॉन्ट-आकार, प्रतिशत और व्यूपोर्ट इकाइयों का उपयोग करके एनिमेशन को कैसे उत्तरदायी बनाया जाए।

आप कैसे सीखेंगे

आप पाठ्यक्रम वीडियो देखकर और प्रशिक्षक द्वारा वीडियो में सिखाई गई बातों का अभ्यास करके सीखेंगे।

प्रदाता	यूट्यूब
प्रशिक्षक	डोनोवन हचिंसन
स्तर	मध्यम
कार्यभार	3-4 घंटे
दृश्य	59,209 बार देखा गया
प्रमाणपत्र	भुगतान किया गया (उदमी पर)

मजेदार तथ्य

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

4. सीएसएस एनीमेशन ट्यूटोरियल (नेट निंजा)

यह मुक्त अवधि उत्साही और सीधे प्रशिक्षक शॉन के साथ नेट-निंजा से लगभग 2 घंटे की सीखने की सामग्री के साथ शुरुआती लोगों के लिए है।

आप क्या सीखेंगे

ट्यूटोरियल विषयों की एक विस्तृत श्रृंखला को कवर करते हैं, सीएसएस एनिमेशन की मूल बातें से लेकर अधिक उन्नत तकनीकों जैसे ट्रांसफ़ॉर्म, ट्रांज़िशन, कीफ़्रेम और बहुत कुछ। ये ट्यूटोरियल आपको यह जानने में मदद कर सकते हैं कि ऐसे एनिमेशन कैसे बनाए जाते हैं जो आपकी वेबसाइट को सजीव बना दें और प्रतियोगिता से अलग कर दें। एनिमेशन फिल मोड और डायरेक्शन में महारत हासिल करने से लेकर चेनिंग एनिमेशन और पॉप-अप और शॉपिंग कार्ट जैसे जटिल तत्वों को एनिमेट करने तक, ये ट्यूटोरियल आपको अपने वेब विकास कौशल को अगले स्तर तक ले जाने के लिए आवश्यक टूल और ज्ञान देंगे।

आप कैसे सीखेंगे

ट्यूटोरियल बहुत छोटा है जिसमें सबसे लंबा वीडियो 10 मिनट का है। आप पाठ्यक्रम वीडियो देखकर और प्रशिक्षक द्वारा वीडियो में सिखाई गई बातों का अभ्यास करके सीखेंगे।

चैनल	शुद्ध निंजा
प्रदाता	यूट्यूब
प्रशिक्षक	शॉन
स्तर	शुरुआत
कार्यभार	2 घंटे
दृश्य	990,079 बार देखा गया
को यह पसंद है	10k
प्रमाणपत्र	कोई नहीं

मजेदार तथ्य

• नेट निंजा पाठ्यक्रमों को आमतौर पर क्लास सेंट्रल पर सर्वश्रेष्ठ पाठ्यक्रमों में उच्च दर्जा दिया जाता है।
• शॉन एक यात्री, संगीतकार और कॉफी के शौकीन हैं।

5. सीएसएस: एनीमेशन (वैल हेड)

वैल सिर मुक्त अवधि लिंक्डइन लर्निंग पर सीएसएस का उपयोग करके एसवीजी एनीमेशन पेश करने के लिए सूची में पहला पाठ्यक्रम है। आप सीएसएस एनीमेशन से परिचित होंगे लेकिन पाठ्यक्रम के माध्यम से कुछ वेक्टर ग्राफिक्स को भी समझेंगे।

आप क्या सीखेंगे

इस कोर्स में सीएसएस ट्रांसफॉर्म और ट्रांजिशन का उपयोग करने, एनीमेशन-विलंब और एनीमेशन-फिल-मोड के साथ काम करने, और समय और आसान सीएसएस एनिमेशन के बारे में जानकारी शामिल है। पाठ्यक्रम में एनिमेटिंग तत्व भी शामिल हैं, स्प्राइट इमेज को एनिमेट करना, कई एनिमेशन को चेन करना और svg इमेज को एनिमेट करना। इसके अतिरिक्त, यह उच्च-प्रदर्शन सीएसएस एनिमेशन बनाने के लिए रणनीतियों पर चर्चा करता है और सुचारू प्रदर्शन सुनिश्चित करने के लिए उन्हें कैसे अनुकूलित किया जाए।

आप कैसे सीखेंगे

वैल सीएसएस ट्रांसफ़ॉर्म और ट्रांज़िशन का परिचय देता है - अधिकांश सीएसएस एनिमेशन की नींव - और दिखाता है कि सरल एनिमेशन को कैसे कीफ़्रेम किया जाए और उनके समय, भरण-मोड और दिशा को समायोजित किया जाए। वह लूपिंग और चेनिंग एनिमेशन, html और svg तत्वों को एनिमेट करना, एनीमेशन प्रदर्शन को अनुकूलित करना, अभी CSS एनिमेशन के लिए सर्वोत्तम उपयोग, और समर्थन और प्रदर्शन के वर्तमान स्तर को कवर करती है और हम भविष्य में इसके बदलने की उम्मीद कैसे कर सकते हैं। वैल पाठों को बिल्डिंग ब्लॉक एनिमेशन की एक छोटी श्रृंखला के रूप में प्रस्तुत करता है - सामान्य चीजें जो आप एनिमेशन के साथ करना चाहते हैं - फिर उन तकनीकों को एक एनिमेटेड इन्फोग्राफिक की एक छोटी परियोजना में एक साथ रखता है ताकि आप उन सभी को कार्रवाई में देख सकें।

प्रदाता	लिंक्डइन सीखने
प्रशिक्षक	वैल सिर
स्तर	मध्यम
कार्यभार	2 घंटे
नामांकन	20 हजार
रेटिंग	4.7 (137 रेटिंग्स)
प्रमाणपत्र	भुगतान (लिंक्डइन लर्निंग)

मजेदार तथ्य

• पाठ्यक्रम के लिए एक विचारक की आवश्यकता नहीं है, आप जीथब कोडस्पेस का उपयोग करके काम कर सकते हैं।

6. सीएसएस - मास्टरिंग एनिमेशन (ड्रिस बौमलिक)

सीएसएस - एनिमेशन में महारत हासिल करना 4.9 स्टार रेटिंग के साथ उडेमी पर उपलब्ध सर्वोत्तम भुगतान पाठ्यक्रमों में से एक है।

आप क्या सीखेंगे

आप रंगों, छायाओं को सजीव करना, चीजों को हिलाना और घुमाना सीखेंगे। आप मेनू और चेकबॉक्स, स्पिनर और फॉर्म बनाना भी सीखेंगे।

आप कैसे सीखेंगे

पाठ्यक्रम छोटी परियोजनाओं के साथ व्यावहारिक शिक्षा प्रदान करता है।

प्रदाता	उडेमी
प्रशिक्षक	ड्रिस बौमलिक
स्तर	शुरुआत
कार्यभार	2 घंटे
नामांकन	15k
रेटिंग	4.9 (383 रेटिंग्स)
प्रमाणपत्र	चुकाया गया

7. रचनात्मक उन्नत सीएसएस एनिमेशन - 100 प्रोजेक्ट बनाएं! (अहमद सादेक)

यदि आप पिछले एक को पूरा करने के बाद दूसरा कोर्स करना चाहते हैं, रचनात्मक उन्नत सीएसएस एनिमेशन - 100 प्रोजेक्ट बनाएं मेरी सिफारिश होगी।

आप क्या सीखेंगे

पाठ्यक्रम सीएसएस का उपयोग करके एनिमेशन, संक्रमण और रूपांतरण के 100 से अधिक विभिन्न उदाहरण बनाने के तरीके पर चरण-दर-चरण निर्देश प्रदान करता है। पाठ्यक्रम का लक्ष्य शिक्षार्थियों को किसी भी रचनात्मक सीएसएस एनिमेशन को बनाने में सक्षम बनाने के लिए सशक्त बनाना है, जिसके बारे में वे सोच सकते हैं। पाठ्यक्रम में सीएसएस क्लिप-पथ संपत्ति और एचटीएमएल तत्वों को एनिमेट करने में इसका उपयोग कैसे किया जाता है। इसमें बटन, चित्र, कार्ड, लोडर, मेनू, रचनात्मक प्रभाव और बहुत कुछ बनाने की विभिन्न तकनीकें शामिल हैं। यह कोर्स शिक्षार्थियों को यह समझने में मदद करेगा कि विभिन्न प्रकार के एनिमेशन, ट्रांज़िशन और ट्रांसफ़ॉर्म कैसे बनाएं और वेबसाइट को अधिक इंटरैक्टिव और आकर्षक बनाने के लिए उनका उपयोग कैसे करें।

आप कैसे सीखेंगे

पाठ्यक्रम हाथों से सीखने और अभ्यास के साथ वीडियो प्रदान करता है।

प्रदाता	उडेमी
प्रशिक्षक	अहमद सादेक
स्तर	शुरुआत
कार्यभार	13 घंटे
नामांकन	17k
रेटिंग	4.7 (1.756 रेटिंग्स)
प्रमाणपत्र	चुकाया गया

8. svg और css एनीमेशन - html और css (codewithsam) का उपयोग करना

कोडविथसम द्वारा पाठ्यक्रम एसवीजी का उपयोग कर सीएसएस एनीमेशन को कवर करने वाले पाठ्यक्रमों में से कुछ हैं। आप 2 घंटे में 3 svg एनिमेशन प्रोजेक्ट सीखेंगे। आप Adobe Illustrator जैसे टूल में svgs बनाना भी सीखेंगे। सभी फाइलें उन छात्रों के लिए प्रदान की जाती हैं जिनके पास सॉफ़्टवेयर नहीं है या केवल कोड करना चाहते हैं।

ये कोर्स सीएसएस एनिमेशन के साथ एक मध्यवर्ती स्तर का पाठ्यक्रम है और यह नए और अनुभवी वेब डेवलपर्स दोनों के लिए एकदम सही है, जिन्होंने अभी तक अपनी परियोजनाओं में svg का उपयोग नहीं किया है। यदि आपने पहले html और css का उपयोग किया है, तो आपको उदाहरणों के साथ अनुसरण करने का ज्ञान होगा।

आप क्या सीखेंगे

पाठ्यक्रम एनिमेटेड एसवीजी तत्वों को बनाने के लिए सीएसएस में उपयोग की जाने वाली मूलभूत तकनीकों को शामिल करता है। svg छवियां किसी भी स्क्रीन आकार पर सटीक दिखती हैं और मोबाइल वेब के महत्व के साथ तेजी से लोकप्रिय हो गई हैं। svg आपको एनिमेशन बनाने और सपाट चित्रण को एक नए स्तर पर ले जाने की अनुमति देता है। इस छोटे से कोर्स के अंत तक आप स्क्रैच से तीन अलग-अलग svg एनिमेशन बना चुके होंगे।

दूसरा रास्ता codewithsam द्वारा किसी वेबसाइट पर लोगो, सामाजिक आइकन, टेक्स्ट और अन्य तत्वों को एनिमेट करने के लिए विभिन्न तकनीकों को शामिल किया गया है। यह css का उपयोग करके हाथ से तैयार पाठ प्रभाव बनाने के लिए चरण-दर-चरण निर्देश प्रदान करता है। यह विभिन्न सीएसएस एनीमेशन गुणों और उनका उपयोग करने के तरीके के बारे में भी बताता है। इसके अतिरिक्त, यह टेक्स्ट और आइकन पर ग्रेडिएंट्स के उपयोग को कवर करता है, जिसमें यह भी शामिल है कि उन्हें क्रॉस-ब्राउज़र कैसे काम करना है। पाठ्यक्रम एनिमेशन बनाने के लिए मास्क और कोडपेन टूल का उपयोग करने के साथ-साथ svg छवियों को ऑनलाइन अनुकूलित करने के लिए एक परिचय पर भी चर्चा करता है।

आप कैसे सीखेंगे

पाठ वीडियो स्क्रीनकास्ट के साथ पढ़ाए जाते हैं, विस्तार से समझाया जाता है क्योंकि हम इस पाठ्यक्रम के लिए सीधे बनाई गई वास्तविक परियोजनाओं के माध्यम से काम करते हैं।

प्रदाता	उडेमी
प्रशिक्षक	codewithsam
स्तर	मध्यम
कार्यभार	2 घंटे
नामांकन	10k
रेटिंग	4.5 (1,073 रेटिंग्स)
प्रमाणपत्र	चुकाया गया

मजेदार तथ्य

• codewithsam में svgs और एनिमेटिंग svgs पर दो पाठ्यक्रम हैं। दूसरा कोर्स मिल सकता है यहाँ . यह उडेमी पर सर्वश्रेष्ठ रेटेड पाठ्यक्रमों में से एक है।

9. 5 html, css और js मिनी प्रोजेक्ट्स - स्क्रॉल एनीमेशन, रोटेटिंग नेविगेशन, ड्रैग इवेंट्स, आदि (ट्रैवर्सी मीडिया)

यह मुक्त अवधि 50 परियोजनाओं में से 5 को शामिल करता है जो ट्रैवर्सी मीडिया उदमी पर अपने एनीमेशन पाठ्यक्रम में पढ़ाता है। पाठ्यक्रम विशुद्ध रूप से परियोजना आधारित पाठ्यक्रम है। मैं पाठ्यक्रम को सूची के अंत में रख रहा हूं क्योंकि जावास्क्रिप्ट के ज्ञान की आवश्यकता है। पाठ्यक्रम आपको वेनिला जेएस का उपयोग करके एनिमेशन बनाना सिखाता है। उदमी पर पूरा कोर्स लगभग 18 घंटे का है।

आप क्या सीखेंगे

पाठ्यक्रम में 5 परियोजनाएं शामिल हैं:

• स्क्रॉल एनीमेशन परियोजना
• घूर्णन नेविगेशन परियोजना
• लॉगिन इनपुट तरंग
• एनिमेटेड 3डी बॉक्स प्रोजेक्ट
• होवरबोर्ड परियोजना

आप कैसे सीखेंगे

आप सीखेंगे कि कैसे जावास्क्रिप्ट का उपयोग करके डोम में हेरफेर करना है और साथ में अनुसरण करके एनिमेशन बनाना है।

संस्थान	ट्रैवर्सी मीडिया
प्रदाता	यूट्यूब
प्रशिक्षक	ब्रैड ट्रैवर्सी
स्तर	मध्यम
कार्यभार	2 घंटे
दृश्य	75 हजार
को यह पसंद है	3k
प्रमाणपत्र	कोई नहीं

अतिरिक्त जानकारी

• आप इस पर सभी 50 परियोजनाओं के साथ पूरा पाठ्यक्रम पा सकते हैं पेड उडेमी कोर्स .

10. जावास्क्रिप्ट खेल: सीएसएस संक्रमण और एनिमेशन के साथ इंटरैक्टिव प्रश्न (लर्नवेबकोड)

यह ब्रैड के मुफ़्त कोडिंग बूटकैंप का एक हिस्सा है जिसे पाया जा सकता है यहाँ . आप सीएसएस एनिमेशन और ट्रांज़िशन के साथ जावास्क्रिप्ट में एक साधारण गणित गेम बनाने का तरीका सीखेंगे

आप क्या सीखेंगे

आप इस खेल के साथ जावास्क्रिप्ट का उपयोग करना और कुछ बुनियादी सीएसएस संक्रमण और एनिमेशन बनाना सीखेंगे।

आप कैसे सीखेंगे

आप यूट्यूब पर वीडियो के साथ पाठ्यक्रम का अनुसरण करके सीखेंगे।

संस्थान	webcode
प्रदाता	यूट्यूब
प्रशिक्षक	चपटी कील
स्तर	मध्यम
कार्यभार	1 घंटा
दृश्य	22k
को यह पसंद है	1k
प्रमाणपत्र	कोई नहीं

आप ब्रैड के और अधिक प्रीमियम पाठ्यक्रम पा सकते हैं यहाँ .

11. बोनस सामग्री (उन्नत एनिमेशन और उपकरण)

एक बार जब आप सीएसएस एनिमेशन की कुछ मूल बातें पूरी कर लेते हैं और उन्हें बनाने में उपयोग की जाने वाली कुछ तरकीबों को समझ सकते हैं, तो मैं आपको कुछ वीडियो देखने की सलाह दूंगा केविन पॉवेल और webdevसरलीकृत . उन्होंने सीएसएस के साथ बहुत सी चीजों को कवर किया है और सीएसएस सीखने के लिए अच्छे संसाधन हैं। यहाँ उनमें से दो जटिल एनिमेशन हैं:

• 3डी सीएसएस - प्रकाश व्यवस्था, एनिमेशन, और बहुत कुछ! केविन पॉवेल से और
• क्या मैं यह बहुत जटिल सीएसएस एनीमेशन बना सकता हूँ? वेबदेव सरलीकृत से

अगर आप कुछ ऐनिमेशन तुरंत जोड़ना चाहते हैं, तो उन्हें स्क्रैच से बनाए बिना, यहां कुछ उपयोगी वेबसाइटें दी गई हैं:

• क्रोधित उपकरण
• keyframes.app
• एनिमेट.सीएसएस
• कीफ़्रेम एनीमेशन
• animista
• funcss

यदि आपके पास और लिंक हैं जो मदद कर सकते हैं, तो कृपया टिप्पणियों में उनका उल्लेख करने में संकोच न करें।