🎬 CSS कीफ्रेम बिल्डर
कुछ सेकंड में CSS कीफ्रेम एनिमेशन डिज़ाइन करें — प्रत्येक रोक पर ट्रांसफॉर्म और ओपैकिटी को सेट करें, लाइव एनिमेशन के पूर्वावलोकन करें, और तैयार करें और पेस्ट करने वाले @keyframes कोड को कॉपी करें। कोई इंस्टॉल, कोई साइनअप आवश्यक नहीं है, यह आपके ब्राउज़र में पूरी तरह से चलता है।
डिज़ाइन से ही निजी. यह टूल पूरी तरह आपके ब्राउज़र में चलता है — आपका डाला हुआ कुछ भी अपलोड या सेव नहीं होता, और यह ऑफ़लाइन भी काम करता है।
परिचय
CSS कीफ्रेम बिल्डर आपको कोड लिखे बिना @keyframes एनिमेशन बनाने की सुविधा देता है। आप ट्रांसफॉर्म प्रॉपर्टीज़ — ट्रांसलेट (X और Y), स्केल, और रोटेट — तथा ओपेसिटी को तीन बिंदुओं पर परिभाषित करते हैं: 0%, 50%, और 100%। एनिमेशन अवधि, टाइमिंग फंक्शन (ईज़, लिनियर, ईज़-इन, ईज़-आउट, ईज़-इन-आउट, या कस्टम क्यूबिक-बीज़ियर), और दोहराव की गिनती (सीमित या असीमित) — सब कुछ पैनल में समायोज्य है। एक लाइव एनिमेटेड प्रीव्यू तुरंत अपडेट होता है ताकि आप तब तक मान समायोजित कर सकें जब तक गति सही न लगे। तैयार होने पर, कॉपी पर क्लिक करें और पूरा @keyframes ब्लॉक — जिसमें एनिमेशन शॉर्टहैंड भी शामिल है — आपके क्लिपबोर्ड पर रख दिया जाता है, जिसे आप अपनी स्टाइलशीट में पेस्ट कर सकते हैं। सब कुछ ब्राउज़र में चलता है, कोई फ़ाइल अपलोड नहीं होती और कहीं भी डेटा नहीं भेजा जाता।
कैसे उपयोग करें
- 0% रोक (एनिमेशन के शुरुआत) के लिए ट्रांसफॉर्म मानों — ट्रांसलेट X/Y, स्केल, और रोटेट — और ओपैकिटी को सेट करें।
- 50% रोक मानों को गति के मध्य बिंदु को परिभाषित करने के लिए अनुकूलित करें, या डिफ़ॉल्ट रखें ताकि एक सरल दो-स्थिति संक्रमण बने।
- अंतिम स्थिति के लिए 100% बिंदु के मानों को सेट करें, फिर अवधि (सेकंड में), टाइमिंग फंक्शन, और दोहराने की गिनती को सेट करें।
- लाइव पूर्वावलोकन को वास्तविक समय में अपडेट करते रहें और किसी भी मान को ट्यून करें जब तक एनिमेशन बिल्कुल सही लगे।
- कॉपी CSS पर क्लिक करें और पूरा @keyframes ब्लॉक और एनिमेशन प्रॉपर्टी को अपने क्लिपबोर्ड पर कॉपी करें, फिर इसे अपने स्टाइलशीट में सीधे पेस्ट करें।
सामान्य प्रश्न
- मैं कौन से ट्रांसफॉर्म प्रॉपर्टीज़ को एनिमेट कर सकता हूं?
- आप ट्रांसलेटएक्स, ट्रांसलेटवाई, स्केल, और रोटेट को एनिमेट कर सकते हैं, और ओपैकिटी। प्रत्येक प्रॉपर्टी को 0%, 50%, और 100% कीफ्रेम रोकों पर स्वतंत्र रूप से सेट किया जा सकता है।
- कौन से समय फंक्शन उपलब्ध हैं?
- बिल्डर में ईज, लिनियर, ईज-इन, ईज-आउट, और ईज-इन-आउट पूर्व-निर्धारित विकल्प शामिल हैं, और एक विशेष बेजियर घन विकल्प भी जिससे आप एक अद्वितीय त्वरण वक्र बना सकते हैं।
- क्या मैं एनिमेशन को अनंत रूप से लूप कर सकता हूं?
- हां। दोहराने की गिनती को अनंत रखें और जनरेट किए गए CSS में animation-iteration-count: infinite का उपयोग करें, जिससे एनिमेशन लगातार लूप करता रहता है।
- क्या मुझे CSS के बारे में ज्ञान होना आवश्यक है ताकि इस उपकरण का उपयोग कर सकूं?
- नहीं। बिल्डर पूरी तरह से दृश्य है — स्लाइडर बढ़ाएं और ड्रॉप-डाउन से मान चुनें। CSS आपके लिए स्वतः जनरेट किया जाता है और किसी भी प्रोजेक्ट में कॉपी करने के लिए तैयार होता है।
- जनरेट किया गया CSS सभी आधुनिक ब्राउज़र्स के साथ संगत है?
- हां। आउटपुट में मानक @keyframes और एनिमेशन शॉर्टहैंड प्रॉपर्टी का उपयोग किया जाता है, जो क्रोम, फ़ायरफ़ॉक्स, सैफ़री, और एज जैसे सभी आधुनिक ब्राउज़र्स में समर्थित हैं, कोई वेंडर प्रीफिक्स के बिना।
- क्या यह टूल मेरा डेटा अपलोड करता है?
- नहीं। सब कुछ आपके ब्राउज़र में ही चलता है, इसलिए आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता — पेज लोड होने के बाद यह ऑफ़लाइन भी काम करता है।