CSS एनिमेशन जेनरेटर
नाम, अवधि, सहजता, पुनरावृत्ति गणना और यात्रा दूरी कॉन्फ़िगर करें। टूल लाइव पूर्वावलोकन के साथ @keyframes और एक उपयोगिता वर्ग को आउटपुट करता है।
महत्वपूर्ण तथ्यों
- वर्ग
- डिज़ाइन एवं रंग
- कीमत
- मुक्त
- खाता
- आवश्यक नहीं
- प्रसंस्करण
- आपके ब्राउज़र में
- इनपुट
- स्थानीय फ़ाइलें या चिपकाया गया डेटा
- प्लैटफ़ॉर्म
- आधुनिक डेस्कटॉप और मोबाइल ब्राउज़र
यह क्या करता है
नाम, अवधि, सहजता, पुनरावृत्ति गणना और यात्रा दूरी कॉन्फ़िगर करें। टूल लाइव पूर्वावलोकन के साथ @keyframes और एक उपयोगिता वर्ग को आउटपुट करता है।
कॉन्फ़िगर करने योग्य समय के साथ एक फ़ेड-एंड-स्लाइड कीफ़्रेम एनीमेशन बनाएं।
इसका उपयोग कैसे करना है
यहां CSS एनिमेशन जेनरेटर का उपयोग करने का संक्षिप्त संस्करण दिया गया है।
- एनीमेशन को नाम दें — एक संक्षिप्त, वर्णनात्मक वर्ग नाम का प्रयोग करें.
- समय निर्धारित करें — अवधि और सहजता नियंत्रण कि गति कैसी महसूस होती है।
- CSS को कॉपी करें — कीफ़्रेम और क्लास को अपनी स्टाइलशीट में चिपकाएँ।
विशेषताएँ जो मायने रखती हैं
CSS एनिमेशन जेनरेटर क्या अच्छा करता है.
- आपके डिवाइस से कुछ भी नहीं छूटता — काम आपके ब्राउज़र टैब में होता है. इस ऐप में कोई अपलोड एंडपॉइंट नहीं है, इसलिए आपकी फ़ाइलें और टेक्स्ट हमारे द्वारा संग्रहीत, लॉग या देखा नहीं जा सकता है।
- कोई अपलोड प्रतीक्षा नहीं — आप सर्वर पर राउंड ट्रिप को पूरी तरह से छोड़ देते हैं। परिणाम आपके अपने सीपीयू द्वारा सीमित होते हैं, नेटवर्क गति या कतार आकार से नहीं।
- निःशुल्क, कोई खाता नहीं, कोई कोटा नहीं — कोई साइन-अप दीवार नहीं, कोई वॉटरमार्क नहीं, कोई दैनिक सीमा नहीं। वैकल्पिक खाते केवल सभी डिवाइसों में पसंदीदा और प्रीसेट सहेजने के लिए मौजूद हैं।
अक्सर पूछे जाने वाले प्रश्नों
क्या मेरा CSS यहां उपयोग करने के लिए सुरक्षित है?
हाँ। यह टूल पूरी तरह से जावास्क्रिप्ट का उपयोग करके आपके ब्राउज़र में चलता है। आप जो कुछ भी चिपकाते या खोलते हैं वह सर्वर पर नहीं भेजा जाता है, और आपके बंद करने के बाद पृष्ठ में कोई प्रति नहीं रहती है।
क्या मुझे एक खाता बनाने की आवश्यकता है?
नहीं, प्रत्येक उपकरण साइन इन किए बिना पूरी तरह से उपयोग करने योग्य है। एक खाता केवल सहेजे गए पसंदीदा और पुन: प्रयोज्य प्रीसेट जोड़ता है।
क्या यह फ़ोन पर काम करता है?
हाँ। इंटरफ़ेस बड़े स्पर्श लक्ष्य और स्टैक्ड लेआउट के साथ मोबाइल-फर्स्ट है, इसलिए यह फोन और टैबलेट के साथ-साथ डेस्कटॉप पर भी काम करता है।
मैं कम गति का सम्मान कैसे करूँ?
एनीमेशन को @मीडिया (प्रिफरेंस-रिड्यूस्ड-मोशन: नो-प्रेफरेंस) में लपेटें या एक रिड्यूस्ड-मोशन ओवरराइड प्रदान करें जो इसे अक्षम कर दे।
पूर्वावलोकन पुनः प्रारंभ क्यों होता है?
किसी भी सेटिंग को बदलने से क्लास का पुनर्निर्माण होता है, जो एनीमेशन को पुनरारंभ करता है ताकि आप नई टाइमिंग देख सकें।
CSS एनिमेशन जेनरेटर खोलें
इसे अभी आज़माएं - यह आपके ब्राउज़र में चलता है और इसके लिए किसी खाते की आवश्यकता नहीं है।
टूल खोलें