CSS कीफ़्रेम एनिमेशन जनरेटर
मल्टी-ट्रैक टाइमलाइन पर असली @keyframes एनिमेशन बनाएँ — हर ट्रैक के लिए transform, opacity और background-color के स्टॉप — साथ में एक खींचने योग्य प्लेहेड जो एनिमेशन के बीच की सटीक इंटरपोलेटेड स्थिति दिखाता है।
🔒 पूरी तरह से आपके ब्राउज़र में संसाधित - आपके द्वारा यहां दर्ज की गई कोई भी चीज़ कभी भी अपलोड नहीं की जाती है।
परिणाम
CSS @keyframes नियम दरअसल एक छोटी टाइमलाइन है: प्रतिशत चेकपॉइंट का एक सेट, जिसमें हर चेकपॉइंट बताता है कि उस ठीक पल पर कोई प्रॉपर्टी कैसी दिखनी चाहिए, और ब्राउज़र बीच की सारी स्थितियों को इंटरपोलेट करता है। अगर हाथ से बनाएँ, तो कई प्रॉपर्टी के ये प्रतिशत चेकपॉइंट एक साथ दिमाग में रखने पड़ते हैं — यह जनरेटर उस टाइमलाइन को ऐसी चीज़ में बदल देता है जिसे आप सचमुच देख और खींच सकते हैं: हर प्रॉपर्टी के लिए एक क्षैतिज लेन, जिसमें हर चेकपॉइंट पर एक स्टॉप मार्कर है।
इसका केंद्रबिंदु है स्क्रब प्लेहेड। इसे 0% और 100% के बीच कहीं भी खींचें, और प्रीव्यू बॉक्स तुरंत उस पल की सटीक संयुक्त स्थिति पर पहुँच जाता है — निकटतम कीफ़्रेम पर नहीं, बल्कि हर सक्रिय ट्रैक पर प्लेहेड के आसपास के दो स्टॉप के बीच रैखिक इंटरपोलेशन से निकाला गया असल मान। स्थिति, घुमाव और स्केल जैसी संख्यात्मक प्रॉपर्टी सीधी संख्याओं में इंटरपोलेट होती हैं; background-color हर लाल, हरे और नीले चैनल को स्वतंत्र रूप से इंटरपोलेट करता है, जिससे रंग ट्रैक बीच के रंगों से होकर आसानी से बदलता है न कि सिर्फ़ उन रंगों के बीच कूदता है जो आपने सेट किए हैं।
कई ट्रैक अपने आप एक सुसंगत एनिमेशन में मिल जाते हैं: transform पर आधारित हर प्रॉपर्टी (हिलाना, घुमाना, स्केल) हर कीफ़्रेम प्रतिशत पर एक एकल transform घोषणा में विलय हो जाती है, जबकि opacity और background-color अपनी पंक्तियों पर अलग रहते हैं, ठीक वैसे ही जैसे हाथ से लिखा गया असली CSS दिखता। जिन प्रतिशतों पर किसी दी गई ट्रैक का कोई स्पष्ट स्टॉप नहीं है, उन्हें जानबूझकर उस प्रॉपर्टी की घोषणाओं से हटा दिया जाता है — ब्राउज़र का अपना कीफ़्रेम इंटरपोलेशन जो स्टॉप मौजूद हैं उनके बीच के अंतराल को भरता है, ठीक वैसे ही जैसे वह आपके हाथ से टाइप किए किसी भी @keyframes नियम के लिए करता।
पाँच प्रीसेट — bounce, shake, pulse, fade और slide-in — एक क्लिक में पूरी, बदलाव के लिए तैयार टाइमलाइन लोड करते हैं (जिसमें उचित अवधि, टाइमिंग फंक्शन और रिपीट काउंट शामिल है)। किसी भी समय Play दबाएँ तो प्रीव्यू एलिमेंट पर असली CSS एनिमेशन चलता हुआ देखें, जो डाइनैमिक रूप से डाली गई स्टाइलशीट के ज़रिए तुरंत जनरेट होता है, फिर पूरा @keyframes ब्लॉक और .animated-element { animation: ... } शॉर्टहैंड कॉपी करके सीधे अपने प्रोजेक्ट में ले जाएँ। इस साइट के हर टूल की तरह, यह सब ब्राउज़र में लोकल रूप से चलता है और कुछ भी कभी अपलोड नहीं किया जाता।