CSS एनिमेशन जनरेटर क्या है?

यह विज़ुअल CSS एनिमेशन बिल्डर आपको मैन्युअल कोड लिखे बिना जटिल कीफ़्रेम एनिमेशन बनाने देता है। कीफ़्रेम परिभाषित करें, टाइमिंग फ़ंक्शन एडजस्ट करें, ड्यूरेशन और डिले सेट करें — फिर जनरेट हुए CSS कोड को सीधे अपने प्रोजेक्ट में कॉपी करें। बटन, लोडर, होवर इफ़ेक्ट और पेज ट्रांज़िशन के लिए बिल्कुल सही।

उपयोग कैसे करें

1. एक एनिमेशन प्रीसेट चुनें (फ़ेड, स्लाइड, बाउंस, रोटेट) या टाइमलाइन पर कीफ़्रेम जोड़कर शुरू से बनाएं।
2. प्रत्येक कीफ़्रेम पर प्रॉपर्टीज एडजस्ट करें — ट्रांसफ़ॉर्म, ओपैसिटी, कलर, स्केल — और ईज़िंग कर्व, ड्यूरेशन और इटरेशन काउंट को फ़ाइन-ट्यून करें।
3. रियल-टाइम में एनिमेशन का प्रीव्यू देखें, फिर जनरेट हुए CSS @keyframes कोड को कॉपी करें या .css फ़ाइल के रूप में डाउनलोड करें।

परिणाम

एक फ़्रंटएंड डेवलपर को पोर्टफ़ोलियो पेज पर कार्ड्स के लिए स्मूथ एंट्रेंस एनिमेशन चाहिए। वे 0.6 सेकंड का ease-out एनिमेशन सेट करते हैं जो 20px नीचे से फ़ेड-इन होता है, CSS कॉपी करते हैं और प्रत्येक कार्ड पर स्टैगर्ड डिले लागू करते हैं।

संबंधित उपकरण