कोडकैन्यन (CodeCanyon) पर 20 सर्वश्रेष्ठ सीएसएस एनिमेशन (CSS Animations)

इंटरनेट इतिहास में एक समय था जब आपको फ्लैश का उपयोग करना पड़ता था, अगर आप किसी एनिमेटेड GIF से परे आपकी वेबसाइट पर कुछ दृश्य प्रभाव (visual effects) जोड़ना चाहते थे। आज के लिए फास्ट फॉरवर्ड, और हम फ्लैश को मृत पाते हैं और CSS3 और HTML5 जैसी चीजें शानदार एनिमेशन और वेब इफेक्ट्स लाती हैं।

यदि आप अपनी वेबसाइट या अगली वेब प्रोजेक्ट में कुछ महान सीएसएस एनिमेशन जोड़ना चाहते हैं, तो आपको शुरू करने के लिए कोडकैन्यन (CodeCanyon) पर 20 सर्वश्रेष्ठ सीएसएस एनिमेशन की एक सूची है:

1. एयरो - CSS3 हॉवर इफेक्ट्स

एयरो - CSS3 हॉवर इफेक्ट्स के साथ कुछ छायांकित ग्लैस एयरो चित्र इफेक्ट्स प्रभाव (shaded glass aero image hover effects) जोड़ें।

यह पूरी तरह उत्तरदायी और उपयोग में आसान है, और आपको यह भी मिलेगा:

• रंग बदलने और चक्र से वर्ग तक स्विच करने में आसान है
• सभी ब्राउज़रों के साथ संगत-यहां तक कि माइक्रोसॉफ्ट एज (Microsoft Edge) भी
• SASS के साथ संगत 
• अनुकूलन योग्य CzS 
• और अधिक! 

रीलीस में शामिल 10 इफेक्ट्स और अधिक इफेक्ट्स आने के साथ, एयरो - CSS3 हॉवर प्रभाव आपकी छवि होवर इफेक्ट्स के लिए सीएसएस एनिमेशन का बहुत बढ़िया बंडल है।

2. मेगाहवर (MegaHover) माउस ओवर इफेक्ट्स

मेगाहॉवर माउस ओवर इफेक्ट्स CSS3 छवि होवर प्रभाव का एक मजबूत बैच प्रदान करता है जो कि बूटस्ट्रैप 3 संगत है।

यह भी है: 

• फ़ॉन्ट विस्मयकारी आइकन का उपयोग करता है 
• पार ब्राउज़र संगत 
• पूरी तरह उत्तरदायी 
• और अधिक 

आसानी से एकीकृत और संशोधित मेगाहोवर माउस ओवर इफेक्ट्स के सैकड़ों अच्छे दिखते हवर इफेक्ट्स में।

3. Animatia - सीएसएस छवि हॉवर इफेक्ट्स

उपयोग करने के लिए आसान, न्यूनतम लोडिंग समय, उच्च अनुकूलन?  Animatia - सीएसएस छवि हॉवर प्रभाव इस और अधिक करता है।

सीएसएस के इस बैच में शामिल हैं: 

• 115 से अधिक उच्च अनुकूलन मंडराना प्रभाव 
• पूरी तरह उत्तरदायी और आसानी से उपयोग फ़ाइलें 
• शुद्ध CSS3 और फ़ॉन्ट विस्मयकारी आइकन 
• और अधिक 

Animatia - सीएसएस छवि हॉवर इफेक्ट्स का बटन शैलियों, ओवरले प्रभाव, कैप्शन और अन्य सीएसएस एनिमेशन के लिए उपयोग करें।

4. हॉवर इफेक्ट्स फ्रेमवर्क

हॉवर इफेक्ट फ़्रेमवर्क एक बहुत ही सरल सीएसएस एनीमेशन समाधान हैI

साफ कोड, पूरी तरह उत्तरदायी, और:

• IcoMoon अल्टमिट फ़ॉन्ट
• 4 आकार और 5 रंग
• 50+ एनिमेशन
• और अधिक

हॉवर इफेक्ट फ़्रेमवर्क में साफ कोड है, और सबसे अच्छी बात यह है कि इसमें कुछ अच्छे दिखने वाली सीएसएस एनिमेशन के साथ शुरू करने के लिए बहुत सारे उदाहरण शामिल हैं।

5. प्रीलोडर्स का संग्रह

Preloaders का संग्रह प्राप्त करने के बाद आपको किसी अन्य संग्रह की ज़रूरत नहीं हो सकती।

आपको प्राप्त होगा:

• आसान अनुकूलन के लिए उपयोग करने के लिए अच्छा प्रलेखन
  
• CSS3 एनिमेशन का हल्का और लचीला सेट
• 27 अद्वितीय प्रीलोडर्स 

पूरी तरह से मोबाइल के अनुकूल, प्रीलोडर्स का संग्रह किसी के भी CSS3 टूलबॉक्स में एक बढ़िया अतिरिक्त है।

6. CSS3 छवि हवर इफेक्ट्स

यदि आपने छवि होवर प्रभाव के लिए एक सीएसएस एनीमेशन देखा है, तो आपने उन्हें सब देखा है, है ना?

काफी नहीं।

CSS3 छवि हॉवर प्रभाव कुछ बहुत अच्छा और अनूठे प्रभाव भी शामिल हैं।

उसमे समाविष्ट हैं:

• 22 विभिन्न CSS3 छवि मंडराना प्रभाव
• पूरी तरह से भयानक और उत्तरदायी
• स्वच्छ CSS3 कोड
• और अधिक

बूटस्ट्रैप संगत CSS3 छवि हॉवर इफेक्ट्स देखें।

7. छवि हॉवर सीएसएस लाइब्रेरी

छवि हॉवर सीएसएस लाइब्रेरी एक स्केलेबल, लाइटवेट इमेज हॉवर सीएसएस ऐनिमेशन लाइब्रेरी है जो कि एक नज़र के लायक है।

यह 58 हॉवर इफेक्ट क्लासेस का एक उत्तम संग्रह है, जो केवल 25KB तक कम कर दिया गया है।

• किसी भी मंडराना सामग्री के साथ काम करता है
• अद्वितीय होवर प्रभाव
• प्रयोग करने में आसान 
• और अधिक

अन्य छवि हॉवर सीएसएस एनीमेशन से खुद को अलग करना मुश्किल है, लेकिन छवि हॉवर सीएसएस लाइब्रेरी ने इसे किया है।

8. एसवीजी लोगो स्क्रॉल एनीमेशन | CSS3 और जावास्क्रिप्ट

सामान्य सीएसएस ऐनिमेशन से छुटकारा पाना अच्छा है-छवि होवर प्रभाव- और एसवीजी लोगो स्क्रॉल एनिमेशन की तरह कुछ पर एक नज़र डालें | CSS3 और जावास्क्रिप्ट।

सिर्फ 4k से कम में, यह कुछ सुंदर स्क्रॉल पेज एसवीजी एनिमेशन जोड़ता है।

एसवीजी लोगो स्क्रॉल एनीमेशन | CSS3 और जावास्क्रिप्ट के साथ कुछ सुंदर वेबपेज एनीमेशन बनाएं।

9. Viavi CSS3 स्क्रॉल प्रभाव

Viavi CSS3 स्क्रॉल प्रभाव एक बहुत अच्छी लग रही है CSS3 एचटीएमएल स्क्रॉल एनीमेशन समाधान है।

कुछ विशेषताओं में शामिल हैं:

• 16 सीएसएस 3 स्क्रॉल प्रभाव
• सरल कार्यान्वयन
• पूरी तरह रिस्पान्सिव 
• और अधिक 

मोबाइल उपयोग के लिए सभी ग्रिड सिस्टम और टच-सक्षम का उपयोग करना, Viavi CSS3 स्क्रॉल इफेक्ट्स न केवल अच्छा लगती हैं, लेकिन यह भी अच्छी तरह से कार्यान्वित है।

10. CSS3 स्पिनर और लोडर

Gifs बिना लोडर की आवश्यकता है? 

कोई बात नहीं।  CSS3 स्पिनर और लोडर उद्धार।

• 25 भिन्नताएं ढूंढें
• अनुकूलित करने के लिए आसान
• विस्तार करने में आसान

CSS3 स्पिनर और लोडर अच्छी तरह से प्रलेखित हैं और स्पिनरों और लोडर के लिए एक पूर्ण सीएसएस समाधान है।

11. मिडिक्स - jQuery के बिना CSS3 एनिमेशन प्रभाव

शुद्ध CSS3, मिडिक्स का उपयोग करना - jQuery के बिना CSS3 एनिमेशन प्रभाव 16 सीएसएस एनिमेशन का ठोस सेट वितरित करता है।

आप समायोजित कर सकते हैं:

• एनिमेशन गति
• एनीमेशन विलम्ब
• आइकन रंग

आपको न केवल मिडीक्स - बिना jQuery के CSS3 एनिमेशन प्रभाव के साथ सीएसएस ऐनिमेशन का एक अद्भुत संग्रह ही नहीं प्राप्त होगा, बल्कि मुफ्त अपडेट और मैत्रीपूर्ण समर्थन भी।

12. CSS3 हॉवर प्रभाव 

CSS3 के हॉवर प्रभाव एक और अच्छा विकल्प है।

आप आसानी से बदल सकते हैं:

• रंग
• सीमा आकार
• चक्र को चौराहें
• पाठ ब्लॉक के बीच अंतर

479 रेटिना आइकन और 20 अलग-अलग प्रभावों के साथ, CSS3 होवर इफेक्ट्स का उपयोग और उपयोग करने के लिए एक महान संसाधन है।

13. VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स

जैसे ही एनिमेटेड प्रीलोडर्स जाते हैं, VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स एक और अनोखी, रचनात्मक, और अच्छे दिखने वाले समाधानों में से एक हैं जिन्हें आप ढूंढने जा रहे हैं।

विशेषताओं में शामिल है:

• 60 हेल्पर
• 40 प्रस्तुत करता
• 30 एनिमेशन
• अल्टमैट रंग

यह अविश्वसनीय रूप से तेज और अद्वितीय है।

VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स को एक करीब से देखो। मुझे लगता है कि आप प्रभावित होंगे।

14. हीड - शुद्ध CSS3 एनिमेशन प्रभाव

ध्यान - शुद्ध CSS3 एनीमेशन प्रभाव सब कुछ प्रदान करता है जो आप सीएसएस एनिमेशन के संग्रह में चाहते हैं।

SCSS (फ़ाइल शामिल) के साथ स्थापित करना, संपादित करना और कॉन्फ़िगर करना आसान है।

• 20 सामग्री डिजाइन रंग विकल्प
• फ़ॉन्ट विस्मयकारी आइकन
• 15 प्रभाव
• और अधिक

हीड - शुद्ध CSS3 एनीमेशन प्रभाव रेटिना के अनुकूल, मैत्रीपूर्ण समर्थन और निःशुल्क अपडेट शामिल हैं।

15. आयन - CSS3 लिंक हॉवर प्रभाव 

हालांकि अधिकांश सीएसएस ऐनिमेशन आपको छवियों और पृष्ठ प्रभावों पर ध्यान केंद्रित करते हैं, अयान - CSS3 लिंक हॉवर प्रभाव लिंक होवर प्रभावों का एक प्रभावशाली लाइनअप प्रदान करता है।

आपको 30 महान दिखने वाले CSS3 लिंक होवर प्रभाव मिलेगा और:

• ठोस ब्राउज़र संगतता
• मदद दस्तावेज़
• आधुनिक एनिमेशन
• और अधिक

और अयान - CSS3 लिंक हॉवर प्रभाव बंडल, क्रिएटिव और तेज है, और सीएसएस एनिमेशन का बहुत अच्छा छूता है बिना अत्यधिक आकर्षक। 

16. सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव

100 हॉवर प्रभावों पर घमंड, सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव अच्छी तरह से डिज़ाइन किए गए प्रभावों की एक प्रभावशाली संख्या प्रदान करता है।

इसके अलावा इसमें शामिल हैं: 

• 22 सामग्री संक्रमण प्रभाव
• 18 ओवरले संक्रमण प्रभाव 
• 23 बटन संक्रमण प्रभाव 
• 100 हॉवर प्रभाव 

जावास्क्रिप्ट या jQuery का उपयोग किए बिना, और शुद्ध सीएसएस का उपयोग कर, सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव प्रस्तुत करता है: 

• ज़ूम-इन और ज़ूम-आउट 
• X घुमाने और y घुमाएँ 
• दाएं और बाएं घुमाए 
• बारी बारी से और पैमाने पर 
• घन ट्रैन्ज़िशन 
• परत हॉवर 
• और अधिक 

17. स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल 

स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल के साथ अपने सोशल मीडिया आइकन में कुछ अच्छे सीएसएस एनिमेशन जोड़ें। 

चुनने के लिए एक साफ डिजाइन और नौ विभिन्न शैलियों के साथ, आप भी आनंद लेंगे: 

• आसान कार्यान्वयन और अनुकूलन 
• ठोस कोड आधार और प्रलेखन 
• कोई छवि या आइकन निर्भरता नहीं 
• क्रॉस-ब्राउज़र संगतता 
• और अधिक 

स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल आपके सोशल मीडिया आइकन लाइनअप के लिए रंग और सीएसएस एनीमेशन का अच्छा स्पर्श जोड़ता है।

18. CSS3 एनिमेशन

आसानी से अपने div, पी, और शरीर एनिमेशन एचटीएमएल CSS3 एनिमेशन के साथ।

यह एक अच्छा स्निपेट है जिसका इस्तेमाल कई अलग-अलग डिज़ाइन स्थितियों में किया जा सकता है और लागू किया जा सकता है।

विशेषताओं में शामिल: 

• उपयोग करने और अनुकूलित करने में आसान 
• केवल CSS3, कोई जावास्क्रिप्ट नहीं 
• 10+ एनिमेशन 

क्या आप अपने डिजाइन टूलबॉक्स में CSS3 एनिमेशन जोड़ेंगे? 

19. शुद्ध CSS3 छवि एडेरोडियन 

कुछ सुन्दर CSS एनिमेशन के लिए अपने स्वयं के स्लाइडर सेटअप या समान शुद्ध CSS3 छवि एडेरोड का उपयोग करें। 

यह है: 

• पूरी तरह उत्तरदायी 
• कोई निश्चित चौड़ाई नहीं है 
• चार कैप्शन विकल्प 
• अनुकूलित करने के लिए आसान 

इस शुद्ध CSS3 छवि एडेरोडियन के साथ कुछ दृश्य संगीत बनाएं।

20. CSS3 मेगा टूलटिप एनिमेशन पैक

सरल टूलटिप्स से थक गये?

CSS3 मेगा टूलटिप एनीमेशन पैक का उपयोग करके कुछ सीएसएस एनिमेशन मैजिक जोड़ें।

इस सीएसएस एनिमेशन टूलटिप पैक में शामिल हैं:

• 10 एनिमेशन प्रभाव
• 8 रंग प्रीसेट
• प्रलेखन (डाक्यूमेन्टैशन)
• और अधिक 

CSS3 मेगा टूलटिप एनीमेशन पैक में एक इंटरनेट एक्सप्लोरर फ़ॉलबैक भी शामिल है।

निष्कर्ष

यहां तक कि बहुत सी सीएसएस एनीमेशन एनवाटो मार्किट (Envato Market) में उपलब्ध है, शायद आप अभी भी वह नहीं पाए हैं जो आप चाहते हैं।

कोई समस्या नहीं है। आप अपना खुद का बना सकते हैं!

Mastering CSS3 की तरह एनवाटो ईबुक (Envato eBooks) की जाँच करें, पेशकश कई अलग कोड पाठ्यक्रमों (code courses) में से एक ले, या एक प्रसिद्ध CSS3 कोड ट्यूटोरियल खोज और अनुसरण करें।