सीएसएस एनिमेशन जनरेटर
CSS एनिमेशन जनरेटर एक मुफ्त ऑनलाइन उपकरण है जो आपको मैन्युअल रूप से कीफ्रेम लिखे बिना चिकनी और आकर्षक CSS एनिमेशन बनाने में मदद करता है। फेड, स्लाइड, बाउंस, रोटेट, फ्लिप, ज़ूम और अन्य पहले से तैयार एनिमेशन इफेक्ट्स में से चुनें। सहज नियंत्रणों का उपयोग करके अवधि, विलंब, समय-निर्धारण फ़ंक्शन, पुनरावृत्ति संख्या, दिशा और फिल मोड को अनुकूलित करें। एक लाइव तत्व पर अपनी एनिमेशन को रीयल-टाइम में पूर्वावलोकन करें, फिर @keyframes और सभी विक्रेता प्रीफ़िक्स सहित उत्पन्न CSS कोड की कॉपी लें।वे डेवलपर्स और डिज़ाइनर जो गहरी CSS एनिमेशन जानकारी के बिना अपनी वेबसाइटों में गति जोड़ना चाहते हैं, के लिए यह पूरी तरह सही है।
क्या है
CSS एनीमेशन आपको केवल CSS के माध्यम से वेब तत्वों पर सुचारू संक्रमण और जटिल गति प्रभाव बनाने की अनुमति देते हैं — बुनियादी एनीमेशनों के लिए जावास्क्रिप्ट की आवश्यकता नहीं होती। CSS एनीमेशन प्रणाली दो मूल अवधारणाओं पर आधारित है: संक्रमण (सरल अवस्था-से-अवस्था परिवर्तन) और कीफ्रेम (बहु-चरणीय एनीमेशन अनुक्रम)। CSS एनिमेशन प्रॉपर्टी के संक्षिप्त रूप में निम्नलिखित शामिल हैं: - animation-name: @keyframes नियम का नाम - एनिमेशन-ड्यूरेशन: एक चक्र पूरा होने में कितना समय लगता है (उदाहरण के लिए, 1 सेकंड, 500 मिलीसेकंड) - एनिमेशन-विलंब: एनिमेशन शुरू होने से पहले का प्रतीक्षा समय - एनिमेशन-टाइमिंग-फ़ंक्शन: गति वक्र (ईज़ी, लीनियर, ईज़-इन, ईज़-आउट, ईज़-इन-आउट, क्यूबिक-बीज़ेयर) - animation-iteration-count: कितनी बार दोहराया जाए (संख्या या अनंत) - एनिमेशन-दिशा: सामान्य, उल्टी, पालटा, पालटा-उल्टी - animation-fill-mode: कौन-से शैलियाँ पहले/बाद में लागू होती हैं (कोई नहीं, आगे, पीछे, दोनों) - animation-play-state: चल रहा है या निलंबित है @keyframes नियम एनीमेशन के चरणों को परिभाषित करता है: ```css @keyframes fadeIn { { opacity: 0; } से { अपारदर्शिता: 1; } पर } ``` पूर्व-निर्मित एनीमेशन श्रेणियों में शामिल हैं: - फेड एनिमेशन: फेडइन, फेडइनअप, फेडइनडाउन, फेडइनलेफ्ट, फेडइनराइट, फेडआउट - स्लाइड एनिमेशन: slideInUp, slideInDown, slideInLeft, slideInRight - बाउंस एनिमेशन: bounceIn, bounceInUp, bounceInDown, bounceOut - घूर्णन एनिमेशन: rotateIn, rotateInUpLeft, rotateInUpRight, rotateOut - ज़ूम एनिमेशन: ज़ूमइन, ज़ूमइनअप, ज़ूमइनडाउन, ज़ूमआउट - विशेष एनीमेशन: हिंज, रोलइन, रोलआउट, फ्लैश, पल्स, शेक, स्विंग, तादा टाइमिंग फ़ंक्शनों की व्याख्या: – आसानी: धीमी शुरुआत, तेज मध्यावस्था, धीमा अंत (डिफ़ॉल्ट) - रैखिक: पूरे समय एकसमान गति – धीमी शुरुआत: धीरे-धीरे शुरू करें और तेज़ी से बढ़ें – ईज़-आउट: तेज़ शुरुआत, धीमा होना – धीमी शुरुआत एवं धीमा समापन; मध्य भाग में तेज़ गति - क्यूबिक-बीज़ेयर (x1, y1, x2, y2): अनुकूलित समय वक्र जनरेटर सभी आवश्यक विक्रेता प्रत्ययों (-webkit-, -moz-, -o-) के साथ एवं पुराने ब्राउज़रों के लिए एक फॉलबैक के साथ स्वच्छ, सभी ब्राउज़रों के लिए संगत CSS आउटपुट करता है।
कैसे उपयोग करें
- गैलरी से एक एनिमेशन इफेक्ट चुनें। फेड, स्लाइड, बाउंस, रोटेट, ज़ूम और स्पेशल इफेक्ट्स जैसी श्रेणियों में खोजें। किसी भी एनिमेशन थंबनेल पर क्लिक करके उसे डेमो तत्व पर पूर्वावलोकन करें।
- स्लाइडर या इनपुट फील्ड का उपयोग करके एनिमेशन की अवधि को समायोजित करें। सामान्य मान 200 मिलीसेकंड (त्वरित प्रतिक्रिया) से लेकर 2–3 सेकंड (नाटकीय प्रभाव) तक होते हैं। छोटी अवधियाँ UI इंटरैक्शन के लिए अधिक त्वरित एवं प्रभावशाली महसूस होती हैं।
- यदि आप चाहते हैं कि एनिमेशन एक विराम के बाद शुरू हो, तो एक विलंब सेट करें। यह कई एनिमेशनों को क्रमबद्ध रूप से प्रदर्शित करने के लिए उपयोगी है (उदाहरण के लिए, 500 मिलीसेकंड बाद हेडर में फेड इन, फिर 800 मिलीसेकंड बाद कंटेंट में स्लाइड इन)।
- ड्रॉपडाउन से एक टाइमिंग फ़ंक्शन चुनें। प्रवेश एनीमेशनों के लिए 'ईज़-आउट' (तेज़ आगमन, नरम रुकावट) और निकास एनीमेशनों के लिए 'ईज़-इन' का उपयोग करें। निरंतर घूर्णनों के लिए 'लीनियर' का उपयोग करें। कर्व एडिटर का उपयोग करके कस्टम क्यूबिक-बीज़ेयर वक्र बनाएँ।
- पुनरावृत्ति संख्या (एनिमेशन कितनी बार चलता है) और दिशा (सामान्य, उल्टी, या आगे-पीछे के प्रभाव के लिए बारी-बारी से) को कॉन्फ़िगर करें। लोडिंग स्पिनर जैसी निरंतर एनिमेशनों के लिए 'अनंत' सेट करें।
- 'प्ले' बटन पर क्लिक करके एनीमेशन को रियल-टाइम में पूर्वावलोकन करें। डेमो तत्व आपके कॉन्फ़िगर किए गए एनीमेशन को चलाता है। वर्तमान स्थिति पर ठहराने के लिए 'पॉज़' पर क्लिक करें या पुनः चलाने के लिए 'रीप्ले' पर क्लिक करें।
- उत्पन्न CSS कोड को आउटपुट पैनल से कॉपी करें। इस कोड में @keyframes परिभाषा, एनिमेशन का संक्षिप्त रूप और प्रत्येक विस्तृत गुण शामिल हैं। इसे अपनी स्टाइलशीट में पेस्ट करें या इनलाइन स्टाइल्स का उपयोग करें।
उदाहरण
इनपुट: Type: Fade In, Duration: 1s, Easing: ease-in-out
प्रक्रिया: Keyframes 0%:opacity=0, 100%:opacity=1 → CSS output
परिणाम: @keyframes fadeIn { 0%{opacity:0} 100%{opacity=1} }
इनपुट: Type: Slide From Left, Duration: 500ms
प्रक्रिया: translateX(-100%) to translateX(0)
परिणाम: @keyframes slideLeft { 0%{transform:translateX(-100%)} 100%{transform:translateX(0)} }
संबंधित खोजें
लोग यह भी खोजते हैं: क्रोशन एनिमेशन जनरेटर, css कीफ़्रेम, क्रोशन एस्टेटिक्स, एनिमेशन जनरेटर।
क्रोशन एनिमेशन जनरेटरcss कीफ़्रेमक्रोशन एस्टेटिक्सएनिमेशन जनरेटर
अक्सर पूछे जाने वाले प्रश्न
CSS एनीमेशन और CSS ट्रांज़िशन में क्या अंतर है?
CSS ट्रांज़िशन दो अवस्थाओं के बीच संक्रमण करते हैं (जैसे, होवर अवस्था में परिवर्तन) और इनके लिए :hover या क्लास परिवर्तन जैसे ट्रिगर की आवश्यकता होती है। CSS एनिमेशन @keyframes का उपयोग करके कई मध्यवर्ती अवस्थाओं को परिभाषित करते हैं और पेज लोड होते ही स्वचालित रूप से चल सकते हैं, अनंत रूप से लूप कर सकते हैं या उल्टी दिशा में चल सकते हैं। सरल होवर/क्लिक प्रभावों के लिए ट्रांज़िशन और जटिल, बहु-चरणीय या स्वचालित गति वाले एनिमेशनों के लिए एनिमेशन का उपयोग किया जा सकता है। दोनों को संयोजित रूप से भी उपयोग किया जा सकता है: होवर अवस्थाओं के लिए ट्रांज़िशन और प्रवेश प्रभावों के लिए एनिमेशन।
पेज लोड होते समय मैं एनीमेशन कैसे ट्रिगर कर सकता हूँ?
बस उस तत्व के CSS में एनिमेशन प्रॉपर्टी जोड़ दें। यह तत्व को रेंडर होने पर स्वचालित रूप से चलने लगेगा: .my-element { animation:FadeIn 1s ease-out; }. यदि आप चाहते हैं कि एनिमेशन प्रारंभ में निलंबित रहे और बाद में JavaScript के माध्यम से सक्रिय हो, तो डिफ़ॉल्ट रूप से `animation-play-state` को `paused` सेट करें और आवश्यकता पड़ने पर (जैसे दृश्य में स्क्रॉल होने पर, उपयोगकर्ता की क्रिया पर या टाइमर के आधार पर) इसे चालू कर दें।
क्या मैं एक ही तत्व पर कई एनिमेशनों को जोड़ सकता हूँ?
हाँ। कॉमा से अलग की गई सूची का उपयोग करके कई एनिमेशन लागू करें: animation:FadeIn 1s, slideInUp 1s; प्रत्येक एनिमेशन में अपनी अवधि, विलंब और समय-निर्धारण फ़ंक्शन हो सकता है। इससे एक साथ फेड इन करते हुए ऊपर की ओर स्लाइड करने जैसे जटिल संयुक्त प्रभाव संभव होते हैं। प्रदर्शन पर ध्यान दें — एक साथ बहुत सारे एनिमेशन मोबाइल उपकरणों पर जंक (अचानक रुकावट) का कारण बन सकते हैं।
मेरी एनिमेशन क्यों सुचारू नहीं है? यह बिखरा हुआ लग रही है।
सुचारू 60fps एनिमेशनों के लिए, केवल उन ही गुणों को एनिमेट करें जिन्हें GPU द्वारा त्वरित किया जा सकता है: ट्रांसफॉर्म (ट्रांसलेट, स्केल, रोटेट, स्क्यू) और ओपैकिटी। चौड़ाई, ऊँचाई, ऊपरी सीमा, बाएँ सीमा, मार्जिन या पैडिंग को एनिमेट करने से बचें — ये लेआउट की पुनः गणना (रीफ्लो) को उत्प्रेरित करते हैं, जो अधिक संसाधन-खपत वाली प्रक्रिया है। यदि एनिमेशन में अव्यवस्था (जैंक) दिखाई दे, तो एनिमेटेड तत्व में `will-change: transform` जोड़ें ताकि ब्राउज़र को इसे अनुकूलित करने का संकेत मिल सके। साथ ही, एक साथ स्क्रीन पर दिखाए जा रहे एनिमेटेड तत्वों की संख्या को कम करें।
क्या CSS एनीमेशन्स उपलब्ध हैं?
कुछ उपयोगकर्ता गति के प्रति संवेदनशील होते हैं और कम एनिमेशन को प्राथमिकता देते हैं। इसे ध्यान में रखते हुए, `preferers-reduced-motion` मीडिया क्वेरी को चेक करें: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }. वेस्टिबुलर विकार वाले उपयोगकर्ताओं को पैरालैक्स प्रभाव, ज़ूमिंग या घूमती एनिमेशन से असुविधा हो सकती है। हमेशा एनिमेशन को निष्क्रिय या न्यूनतम करने का विकल्प प्रदान करें, और बिना उपयोगकर्ता नियंत्रण के लंबी एनिमेशनों को स्वचालित रूप से चलाने से बचें।