CSS एनिमेशन जनरेटर
प्रीसेट, लाइव प्रीव्यू, cubic-bezier एडिटर और कॉपी करने के लिए तैयार CSS, SCSS व Tailwind आउटपुट के साथ @keyframes CSS एनिमेशन दृश्य रूप से बनाएं।
अपडेट किया गया
CSS Animation Generator
Visually build @keyframes animations with presets, live preview, and ready-to-copy CSS, SCSS & Tailwind output.
Preset & Name
Timing & Behavior
Keyframes
Live Preview
Generated Code
@keyframes my-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.my-animation {
animation-name: my-animation;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease;
animation-fill-mode: none;
animation-play-state: running;
}अक्सर पूछे जाने वाले प्रश्न
यह क्या करता है?
यह @keyframes एनिमेशन को दृश्य रूप से बनाता है। एक प्रीसेट चुनें या keyframe स्टॉप परिभाषित करें, अवधि/विलंब/टाइमिंग/दिशा को समायोजित करें, लाइव प्रीव्यू देखें और CSS/SCSS/Tailwind कॉपी करें।
कस्टम cubic-bezier?
हाँ। cubic-bezier (custom) चुनें और x1/y1/x2/y2 इनपुट के साथ एक दृश्य कर्व एडिटर दिखाई देगा। परिणामी मान लाइव प्रीव्यू और जनरेट किए गए कोड दोनों पर लागू होता है।
Tailwind आउटपुट कितना सटीक है?
यह एक tailwind.config.js स्निपेट उत्सर्जित करता है जो animate-<name> यूटिलिटीज़ के लिए theme.keyframes/animation को विस्तारित करता है। कच्चा @keyframes CSS फ़ॉलबैक के रूप में शामिल किया जाता है।
क्या CSS Animation Generator उपयोग करने के लिए मुफ़्त है?
हाँ, CSS Animation Generator 100% मुफ़्त है — बिना पंजीकरण, बिना छिपे शुल्क और बिना उपयोग सीमा के। पूरी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। CSS Animation Generator सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या स्टोर नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या CSS Animation Generator मोबाइल डिवाइस पर काम करता है?
हाँ, CSS Animation Generator पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं — किसी ऐप को डाउनलोड करने की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में CSS Animation Generator खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप रुकावट या उपयोग की सीमा नहीं है।
यह टूल किन प्रोग्रामिंग भाषाओं या फ़ॉर्मैट का समर्थन करता है?
CSS Animation Generator लोकप्रिय फ़ॉर्मैट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल का इंटरफ़ेस देखें।
मैं CSS Animation Generator का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार सेटिंग्स समायोजित करें, और टूल इसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को अपने क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
कौन-से ब्राउज़र समर्थित हैं?
CSS Animation Generator सभी आधुनिक ब्राउज़रों में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
CSS transition और CSS animation में क्या अंतर है?
CSS transition किसी प्रॉपर्टी को दो स्टेट्स के बीच एनिमेट करता है और केवल किसी ट्रिगर, जैसे hover या class में बदलाव, के जवाब में चलता है, पुरानी वैल्यू से नई वैल्यू तक सहजता से पहुंचते हुए। CSS animation @keyframes का इस्तेमाल करके टाइमलाइन पर कई इंटरमीडिएट स्टेप्स तय करता है और एलिमेंट के लोड होते ही अपने-आप चल सकता है, हमेशा के लिए लूप कर सकता है, रिवर्स हो सकता है, या डायरेक्शन बदल-बदल सकता है (alternate)। सिंपल एक-बार होने वाले स्टेट बदलावों, जैसे बटन के रंग का फ़ेड, के लिए transitions सबसे अच्छे हैं, जबकि animations मल्टी-स्टेप मोशन, जैसे bounce, स्पिनर, या 0% से 100% के बीच कई प्रतिशत बिंदुओं को छूने वाली सीक्वेंस, को संभालते हैं। यह जनरेटर @keyframes वाला रास्ता अपनाता है, जिससे आप हर स्टॉप तय कर सकते हैं, टाइमिंग और iteration सेट कर सकते हैं, इसे लाइव प्रीव्यू कर सकते हैं, और साफ़-सुथरा CSS, SCSS, या Tailwind कोड कॉपी कर सकते हैं।
animation-fill-mode क्या करता है, और मुझे forwards या both कब इस्तेमाल करना चाहिए?
डिफ़ॉल्ट रूप से CSS animation किसी एलिमेंट को केवल तब तक स्टाइल करता है जब तक वह चल रहा होता है; शुरू होने से पहले और खत्म होने के बाद, एलिमेंट वापस अपने सामान्य स्टाइल्स पर आ जाता है। fill-mode प्रॉपर्टी इसे बदल देती है। "forwards" एनिमेशन खत्म होने के बाद एलिमेंट को उसके आख़िरी keyframe (100%) पर बनाए रखता है, ताकि कोई fade-in गायब होने के बजाय दिखता रहे। "backwards" प्लेबैक शुरू होने से पहले किसी भी delay के दौरान पहले keyframe (0%) को लागू करता है, जिससे बिना-एनिमेट स्टेट का फ्लैश दिखने से रुक जाता है। "both" इन दोनों को मिला देता है, delay के दौरान शुरुआती फ़्रेम और बाद में आख़िरी फ़्रेम को बनाए रखते हुए, जो entrance इफ़ेक्ट्स के लिए सबसे सुरक्षित विकल्प है। "none" इन सबको बंद कर देता है। गलत मोड चुनने पर आपका एलिमेंट प्लेबैक की सीमाओं पर झिलमिलाने (flicker) लगता है। यह जनरेटर सभी चार वैल्यू एक्सपोज़ करता है, ताकि आप कोड कॉपी करने से पहले fill mode को टॉगल करके लाइव प्रीव्यू में असर देख सकें।
मैं किसी CSS animation को लोडिंग स्पिनर की तरह हमेशा के लिए लूप कैसे करूं?
किसी तय संख्या की जगह iteration count को "infinite" पर सेट करें। iteration count ब्राउज़र को बताता है कि @keyframes को शुरू से अंत तक कितनी बार चलाना है; वैल्यू 1 एक बार चलती है, 3 तीन बार चलती है, और "infinite" तब तक बार-बार चलती रहती है जब तक एलिमेंट हटा न दिया जाए या एनिमेशन को pause न कर दिया जाए। एक स्मूद, बिना रुके चलने वाले स्पिनर के लिए आपको एक "linear" timing function भी चाहिए ताकि हर rotation एक जैसी स्पीड से चले और लूप के जोड़ पर कोई ईज़िंग न दिखे, साथ ही एक ऐसा keyframe चाहिए जो 0 से 360 डिग्री तक घूमे। इस जनरेटर का Spin प्रीसेट यह पहले से ही सेट करके देता है, लेकिन आप इसी infinite count को किसी भी प्रीसेट पर लागू करके pulsing, wobbling, या breathing जैसे इफ़ेक्ट बना सकते हैं। iteration को infinite पर सेट करें, सीमलेस लूपिंग चाहिए तो linear ईज़िंग चुनें, प्रीव्यू करें, और नतीजा कॉपी कर लें।
CSS की timing function में चार cubic-bezier नंबरों का क्या मतलब है?
एक cubic-bezier timing function यह कंट्रोल करता है कि एनिमेशन अपनी अवधि के दौरान कैसे तेज़ और धीमा होता है, और यह दो कंट्रोल पॉइंट्स से परिभाषित होता है जिन्हें x1, y1, x2, y2 के रूप में लिखा जाता है। x वैल्यूज़ को 0 और 1 के बीच ही रहना होता है क्योंकि वे समय में प्रगति को दर्शाती हैं, जबकि y वैल्यूज़ 0 से नीचे या 1 से ऊपर जा सकती हैं ताकि overshoot या anticipation जैसे इफ़ेक्ट बनाए जा सकें, जैसे कोई वैल्यू जो टारगेट से आगे निकलकर फिर वहीं टिक जाए। पहला पॉइंट यह तय करता है कि मोशन शुरुआत में कैसे ईज़ इन होता है; दूसरा तय करता है कि यह अंत में कैसे ईज़ आउट होता है। जाने-पहचाने नामी ईज़िंग्स दरअसल प्रीसेट ही हैं: उदाहरण के लिए, ease-in लगभग cubic-bezier(0.42, 0, 1, 1) के बराबर है। इस टूल का विज़ुअल कर्व एडिटर आपको सभी चार नंबरों को खींचने या टाइप करने देता है और कर्व व लाइव प्रीव्यू को तुरंत फिर से बना देता है, ताकि आप कॉपी करने से पहले इसके फ़ील को बारीकी से ठीक कर सकें।
मेरा CSS animation खत्म होने पर फ्लैश क्यों करता है या वापस शुरुआत में क्यों कूद जाता है?
यह वापस कूदना इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से, एनिमेशन पूरा होते ही एलिमेंट को स्टाइल करना बंद कर देता है, इसलिए एलिमेंट वापस अपने बेस CSS में जो भी लिखा है उस पर लौट आता है। अगर आपका 0% keyframe opacity को 0 पर सेट करता है और एलिमेंट की सामान्य स्टेट भी अदृश्य है, तो पूरा हो चुका fade-in गायब हो जाएगा। इसका समाधान है animation-fill-mode: "forwards" इस्तेमाल करें ताकि एनिमेशन खत्म होने के बाद एलिमेंट अपने 100% keyframe पर टिका रहे, या "both" इस्तेमाल करें ताकि यह किसी शुरुआती delay को भी कवर कर ले। लूप की शुरुआत में कूदना आमतौर पर इसका मतलब होता है कि आपके 0% और 100% keyframes आपस में मेल नहीं खाते, इसलिए टाइमलाइन सहजता से आगे नहीं बढ़ पाती। यह जनरेटर दोनों समस्याओं को पकड़ने में मदद करता है: एक fill mode सेट करें, अपने पहले और आख़िरी स्टॉप्स को एक-दूसरे से मिलाएं, और CSS कॉपी करने से पहले Replay बटन से बार-बार ट्रांज़िशन देखकर देख लें कि यह पूरी तरह साफ़ है।
संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
CSS Animation Generator के बारे में
CSS Animation Generator एक मुफ़्त विज़ुअल टूल है जिससे आप बिना हाथ से बॉयलरप्लेट लिखे @keyframes एनिमेशन बना सकते हैं। कोई प्रीसेट चुनें या अपने खुद के keyframe स्टॉप्स तय करें, टाइमिंग सेट करें, लाइव एनिमेशन देखें, और CSS, SCSS या Tailwind में इस्तेमाल के लिए तैयार कोड कॉपी करें। यह फ्रंट-एंड डेवलपर्स, थोड़ा-बहुत CSS लिखने वाले डिज़ाइनरों, और उन सभी लोगों के लिए बनाया गया है जो एनिमेशन सिंटैक्स याद किए बिना एक साफ़-सुथरा माइक्रो-इंटरैक्शन — फ़ेड, स्लाइड, या स्पिनर — चाहते हैं।
सब कुछ आपके ब्राउज़र में ही, लोकली चलता है। आप जो कुछ भी बनाते हैं वह किसी सर्वर पर अपलोड नहीं होता, कोई साइन-अप नहीं है, और इस्तेमाल की कोई सीमा नहीं है। लाइव प्रीव्यू आपके पेज पर एक अस्थायी <style> टैग इंजेक्ट करके काम करता है, इसलिए जो एनिमेशन आप देख रहे हैं वही असल में वह कोड है जिसे आप कॉपी करते हैं।
प्रीसेट्स और keyframe एडिटर
15 बिल्ट-इन प्रीसेट्स में से किसी एक से शुरुआत करें: Fade In, Fade Out, Slide In (लेफ्ट, राइट, अप, डाउन), Bounce, Pulse, Spin, Shake, Flip, Zoom In, Zoom Out, और Wobble। हर प्रीसेट के साथ keyframe स्टॉप्स का एक सेट लोड होता है जिसे आप अपनी मर्ज़ी से एडिट कर सकते हैं।
एक keyframe स्टॉप टाइमलाइन पर एक बिंदु होता है, जिसे 0% (शुरुआत) से 100% (अंत) तक प्रतिशत में दर्शाया जाता है। हर स्टॉप के लिए आप चार प्रॉपर्टीज़ सेट कर सकते हैं:
- transform —
translateX/Y,scale,rotate,perspective, और कोई भी अन्य वैध CSS transform। - opacity — फ़ेड इफ़ेक्ट के लिए 0 से 1 के बीच की वैल्यू।
- color — उस पल पर टेक्स्ट का रंग।
- background — उस पल पर बैकग्राउंड का रंग।
Add Stop से मोशन के हिसाब से जितने चाहें उतने स्टॉप्स जोड़ें, हर एक को टाइमलाइन पर खींचकर सेट करें, या जो नहीं चाहिए उन्हें हटा दें। एनिमेशन का नाम अपने-आप साफ़ (sanitize) हो जाता है — सिर्फ़ अक्षर, नंबर, हाइफ़न और अंडरस्कोर (अधिकतम 40 कैरेक्टर) — ताकि जनरेट हुआ CSS हमेशा वैध रहे।
टाइमिंग, ईज़िंग, और cubic-bezier कर्व
एक ही एनिमेशन उसकी टाइमिंग के हिसाब से बिल्कुल अलग महसूस हो सकता है। यह जनरेटर CSS की हर स्टैंडर्ड एनिमेशन प्रॉपर्टी को एक्सपोज़ करता है:
- Duration 0.1 सेकंड से 10 सेकंड तक, और delay 0 सेकंड से 5 सेकंड तक।
- Iteration count — एक संख्या, या स्पिनर जैसे लूप के लिए
infinite। - Direction —
normal,reverse,alternate, याalternate-reverse। - Timing function —
ease,ease-in,ease-out,ease-in-out,linear, या कस्टमcubic-bezier। - Fill mode —
none,forwards,backwards, याboth, जो यह तय करता है कि एनिमेशन के बाहर एलिमेंट अपना पहला या आख़िरी फ़्रेम पकड़े रखे या नहीं। - Play state —
runningऔरpausedके बीच टॉगल करें।
कस्टम cubic-bezier ऑप्शन चुनते ही एक विज़ुअल कर्व एडिटर सामने आ जाता है। एक cubic-bezier फ़ंक्शन दो कंट्रोल पॉइंट्स, x1, y1, x2, y2, से परिभाषित होता है, जो ईज़ कर्व को मोड़ते हैं। इन चार नंबरों को एडिट करते ही कर्व तुरंत फिर से बन जाता है, और वही एक्ज़ैक्ट वैल्यू प्रीव्यू और एक्सपोर्ट किए गए कोड, दोनों में लागू होती है।
लाइव प्रीव्यू और कॉपी के लिए तैयार आउटपुट
अपने एनिमेशन को चार प्रीव्यू शेप्स — बॉक्स, सर्कल, टेक्स्ट लेबल, और बटन — पर टेस्ट करें, ताकि आप अंदाज़ा लगा सकें कि यह उस तरह के एलिमेंट पर कैसा दिखेगा जिस पर आप इसे असल में इस्तेमाल करेंगे। Replay बटन एनिमेशन को मांगे जाने पर फिर से शुरू करता है, जो उन वन-शॉट इफ़ेक्ट्स के लिए काफ़ी काम आता है जिन्हें आप वरना केवल एक बार, लोड होते समय ही देख पाते।
जब मोशन सही लगे, तो आउटपुट टैब को अपनी ज़रूरत के फ़ॉर्मैट पर स्विच कर दें:
- CSS — पूरा
@keyframesब्लॉक, साथ में सभी आठ एनिमेशन प्रॉपर्टीज़ वाली एक क्लास। - SCSS — keyframes के साथ duration और delay को अलग निकालकर Sass वेरिएबल्स में डाला हुआ।
- Tailwind — एक
tailwind.config.jsस्निपेट जोtheme.keyframesऔरtheme.animationको एक्सटेंड करता है ताकि आपanimate-<name>यूटिलिटी इस्तेमाल कर सकें, साथ ही फ़ॉलबैक के तौर पर असली@keyframesभी शामिल रहता है।
इनमें से किसी को भी एक क्लिक में अपने क्लिपबोर्ड पर कॉपी करें, या स्निपेट को अपने एनिमेशन के नाम पर बनी .css, .scss, या .js फ़ाइल के रूप में डाउनलोड करें। चूंकि हर प्रीसेट और प्रॉपर्टी स्टैंडर्ड CSS से जुड़ी है, इसलिए नतीजा सभी आधुनिक ब्राउज़रों — Chrome, Firefox, Safari, और Edge — में बिना किसी रनटाइम लाइब्रेरी के काम करता है।