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

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

फेड, स्लाइड, ज़ूम, घुमाव, बाउंस, ध्यान खींचने वाली, निकास और लोडर श्रेणियों में बँटी चालीस से ज़्यादा तैयार एनिमेशन में से चुनिए या ज़ीरो से अपनी ख़ुद की एनिमेशन बनाइए। हर keyframe opacity, scale, rotation, translate X और Y, skew X और Y, blur, border radius, box shadow और बैकग्राउंड कलर — सब कंट्रोल करता है। पहले से कोई @keyframes ब्लॉक है? इंपोर्ट डायलॉग में पेस्ट कीजिए, विज़ुअल एडिटर हर स्टेप को वैसा का वैसा बना देगा। प्रीव्यू पॉज़ करके लाल स्क्रबर खींचने पर बीच की कोई भी फ्रेम जाँच सकते हैं, और आउटपुट साधारण @keyframes CSS होता है, जो किसी भी stylesheet में सीधे चिपकाने के लिए तैयार है।

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

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

कब उपयोग करें

• पेज लोड होते समय हीरो सेक्शन, मॉडल या कार्ड पर एंट्री एनिमेशन जोड़ने के लिए।
• बटन की माइक्रो-इंटरैक्शन डिज़ाइन करने के लिए, जैसे hover पर हल्का सा बड़ा होना या फॉर्म एरर पर shake।
• फ्रेमवर्क में जोड़ने से पहले लोडिंग स्पिनर और skeleton स्टेट का प्रोटोटाइप बनाने के लिए।

परिणाम

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

अक्सर पूछे जाने वाले प्रश्न

CSS animations और transitions में फ़र्क क्या है?

transitions hover, focus या क्लास बदलने जैसे ट्रिगर पर एक बार state A से B तक जाती हैं। animations @keyframes नियम पर चलती हैं, इनमें जितने चाहें बीच के स्टेप हो सकते हैं, ये लूप कर सकती हैं और यूज़र इंटरैक्शन के बिना पेज लोड पर ख़ुद शुरू हो जाती हैं।

मेरी एनिमेशन एक बार चलकर ग़ायब क्यों हो जाती है?

एनिमेशन ख़त्म होते ही element अपनी मूल styles पर लौट जाता है। animation-fill-mode को forwards कर दीजिए, आख़िरी keyframe के values वहीं रुक जाएंगे; या both कर दीजिए तो delay के दौरान पहला keyframe भी लागू रहेगा।

नैचुरल फ़ील के लिए कौन-सा easing चुनें?

एंट्री के लिए ease-out अच्छा है, अंत में स्पीड कम होने से मूवमेंट थमता-सा लगता है। एग्ज़िट के लिए उल्टा यानी ease-in। cubic-bezier(0.34, 1.56, 0.64, 1) हल्की-सी ओवरशूट देता है, जो हल्का-फुल्का चंचल लगता है पर बेवकूफ़ नहीं।

क्या ये एनिमेशन पुराने ब्राउज़र में चलेंगी?

2013 के बाद रिलीज़ हुए हर ब्राउज़र में @keyframes बिना vendor prefix के सपोर्टेड है। अगर आपको IE 10 या उससे पुराने ब्राउज़र भी पकड़ने हैं तो -webkit- prefix चाहिए, लेकिन उनकी संख्या इतनी कम है कि अतिरिक्त CSS लिखना अमूमन फ़ायदे का सौदा नहीं।

एनिमेशन को हमेशा के लिए लूप कैसे करें?

iteration-count को infinite रखिए और साथ में direction: alternate जोड़ दीजिए। हर साइकल उल्टी दिशा में चलेगी और आपको कोमल आगे-पीछे मूवमेंट मिलेगा (pulse और shake जैसे इफ़ेक्ट के लिए बढ़िया) — शुरुआत पर अचानक छलांग नहीं।

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