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

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

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

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

परिणाम

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

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