सीएसएस कीफ्रेम एनीमेशन स्टूडियो
अवधि नियंत्रण और कीफ्रेम के साथ फ्लोट, पल्स, बंप, शेक और स्पिन के लिए चिकनी सीएसएस एनिमेशन उत्पन्न करें.
आपके ब्राउज़र में चलता है। आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं। जाँचने का तरीका देखें
…
कैसे करें
- 1चरण 1: सीएसएस कीफ्रेम एनीमेशन स्टूडियो खोलें और अपनी जानकारी डालें
अपनी संख्याएँ या टेक्स्ट लिखें, फ़ाइल जोड़ें या ज़रूरी विकल्प चुनें। कुछ भी अपलोड नहीं होता: सब कुछ आपके ब्राउज़र में ही रहता है।
- 2चरण 2: सीएसएस कीफ्रेम एनीमेशन स्टूडियो क्या करता है
अवधि नियंत्रण और कीफ्रेम के साथ फ्लोट, पल्स, बंप, शेक और स्पिन के लिए चिकनी सीएसएस एनिमेशन उत्पन्न करें.
- 3चरण 3: परिणाम देखें और मिलान करें
परिणाम तुरंत दिखता है। एक मान बदलकर देखें कि उत्तर कैसे बदलता है, फिर अपने मामले के अनुसार सही आँकड़ा रखें।
- 4चरण 4: कॉपी या सेव करें
परिणाम कॉपी करें या डाउनलोड करें। किसी ज़रूरी फ़ैसले से पहले आधिकारिक स्रोत या सलाहकार से पुष्टि कर लें।
इस टूल के बारे में
बटन, हीरो बैज, अधिसूचना आइकन और लोडिंग संकेतक में जीवन को सांस लें। जेंटल फ्लोट, एटेन्शन पल्स, प्लेफुल बाउंस, त्रुटि शेक और इन्फिनिट स्पिन सहित लोकप्रिय यूआई एनीमेशन प्रीसेट से चुनें। सेकंड में प्लेबैक अवधि समायोजित करें और उत्पादन के लिए तैयार सीएसएस कीफ्रेम कोड कॉपी करें।
बेहतर नतीजों के लिए सुझाव
शुरू करने से पहले विकल्प पढ़ लें और पहले किसी छोटे नमूने से टूल आज़माएँ। सब कुछ आपके अपने डिवाइस पर ब्राउज़र में चलता है, इसलिए आप जो लिखते या जोड़ते हैं वह अपलोड नहीं होता, और टैब बंद करने पर मिट जाता है। कुछ ठीक न लगे तो पेज रीलोड करके फिर कोशिश करें, या इस पेज के रिपोर्ट लिंक से हमें बताएँ कि क्या गड़बड़ हुई ताकि हम ठीक कर सकें। अगर नतीजा अब भी ग़लत लगे तो एक बार में एक मान बदलकर देखें कि कौन सा खाना सबसे ज़्यादा असर डालता है। अगर आपको यह टूल दोबारा चाहिए तो इस पेज को बुकमार्क कर लें।
मुख्य बातें
- श्रेणी: इमेज
- आपके ब्राउज़र में चलता है, साइन-अप नहीं, अपलोड नहीं।
- आपका इनपुट आपके डिवाइस पर ही रहता है।
- कई भाषाओं में उपलब्ध।
- सामग्री की आख़िरी समीक्षा:
अक्सर पूछे जाने वाले सवाल
क्या ये सीएसएस एनिमेशन हार्डवेयर त्वरित हैं?
Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.
क्या मैं एनीमेशन की गति को समायोजित कर सकता हूँ?
हाँ. अवधि स्लाइडर आपको वास्तविक समय में 0.5 सेकंड से 4.0 सेकंड तक एनिमेशन को तेज या धीमा करने की अनुमति देता है।
मैं केवल होवर पर एनीमेशन कैसे ट्रिगर करूं?
In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).
क्या इसके लिए किसी भी जावास्क्रिप्ट पुस्तकालय की आवश्यकता है?
नहीं, उत्पन्न एनीमेशन 100% शुद्ध सीएसएस हैं, शून्य जावास्क्रिप्ट ओवरहेड की आवश्यकता है।