CSS एनिमेशन जनरेटर

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

1. एनिमेशन प्रीसेट चुनें: सामान्य एनिमेशन में से चुनें, फ़ेड, स्लाइड, बाउंस, रोटेट, पल्स, शेक आदि।
2. अवधि और व्यवहार अनुकूलित करें: अवधि, विलंब, easing, पुनरावृत्ति संख्या और fill mode समायोजित करें।
3. CSS कॉपी करें: पूरी @keyframes परिभाषा और animation शॉर्टहैंड प्रॉपर्टी आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार हैं।

CSS एनिमेशन जनरेटर क्यों इस्तेमाल करें?

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

विशेषताएँ

• एनिमेशन प्रीसेट: फ़ेड, स्लाइड, बाउंस, रोटेट, पल्स, शेक, फ़्लिप, ज़ूम आदि, सभी लाइव पूर्वावलोकन के साथ।
• कस्टम कीफ़्रेम संपादक: दृश्य इंटरफ़ेस के साथ शून्य से अपनी एनिमेशन बनाएँ।
• टाइमिंग नियंत्रण: अवधि (ms/s), विलंब, easing (linear, ease, cubic-bezier) और पुनरावृत्ति संख्या सेट करें।
• फ़िल मोड: forwards, backwards, both और none व्यवहार नियंत्रित करें।
• JavaScript की आवश्यकता नहीं: सभी जनरेट की गई एनिमेशन शुद्ध CSS में हैं, कोई लाइब्रेरी या फ़्रेमवर्क नहीं।

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

CSS में एनिमेशन और ट्रांज़िशन में क्या अंतर है?

CSS ट्रांज़िशन राज्य परिवर्तनों (होवर, फ़ोकस, क्लास टॉगल) पर शुरू होते हैं और दो अवस्थाओं के बीच एनिमेट करते हैं। CSS एनिमेशन कई अवस्थाओं को परिभाषित करने के लिए @keyframes का उपयोग करते हैं और उपयोगकर्ता इंटरैक्शन से स्वतंत्र रूप से चलते हैं, वे लूप, रिवर्स और स्वचालित रूप से शुरू हो सकते हैं।

animation-fill-mode क्या है और यह क्यों महत्वपूर्ण है?

animation-fill-mode नियंत्रित करता है कि क्या तत्व एनिमेशन के शुरू होने से पहले (backwards), इसके समाप्त होने के बाद (forwards), या दोनों से शैलियों को बनाए रखता है। forwards के बिना, तत्व एनिमेशन के अंत में अपनी मूल शैली पर वापस आ जाता है।

क्या CSS एनिमेशन प्रदर्शन-अनुकूल हैं?

केवल transform और opacity का उपयोग करने वाले एनिमेशन GPU-त्वरित और बहुत सहज होते हैं। width, height, margin या top/left जैसी लेआउट प्रॉपर्टीज़ को एनिमेट करने से बचें, वे लेआउट पुनर्गणना को ट्रिगर करते हैं और जैंक का कारण बन सकते हैं। 60 fps के लिए transform और opacity पर टिके रहें।