सीएसएस ट्रांज़िशन जनरेटर कस्टमाइज़ करने योग्य प्रॉपर्टी, अवधि, ईजिंग, और होवर प्रभावों के साथ सीएसएस ट्रांज़िशन बनाएं।
सीएसएस ट्रांज़िशन जनरेटर
कस्टमाइज़ करने योग्य प्रॉपर्टी, अवधि, ईजिंग, और होवर प्रभावों के साथ सीएसएस ट्रांज़िशन बनाएं।
ट्रांज़िशन गुणों को सेट करें
CSS गुण, अवधि, टाइमिंग फ़ंक्शन और देरी चुनें।
हॉवर राज्य परिभाषित करें
हॉवर पृष्ठभूमि रंग, स्केल, बॉर्डर त्रिज्या और घुमाव सेट करें।
परीक्षण और कॉपी करें
पूर्वावलोकन तत्व पर हॉवर करें और ट्रांज़िशन का परीक्षण करें, फिर CSS को कॉपी करें।
What Is सीएसएस ट्रांज़िशन जनरेटर?
सीएसएस ट्रांज़िशन जनरेटर सीएसएस प्रॉपर्टी मानों के बीच चिकनी राज्य परिवर्तन बनाता है। उन एनिमेशनों के विपरीत जो स्वचालित रूप से चल सकते हैं, ट्रांज़िशन को एक ट्रिगर की आवश्यकता होती है - आमतौर पर एक हॉवर, फोकस या सक्रिय राज्य। यह उपकरण आपको प्रत्येक ट्रांज़िशन पैरामीटर को कॉन्फ़िगर करने देता है: लक्षित करने के लिए कौन सी संपत्ति है, ट्रांज़िशन कितनी देर तक चलता है, किस ईज़िंग फंक्शन का उपयोग करना है, और शुरू होने से पहले कितनी देर तक विलंबित करना है। इसमें मानक ईज़िंग फंक्शन प्लस लोकप्रिय घन-वेज़र प्रीसेट जैसे कि आसान-इन-बैक, आसान-आउट-बैक और आसान-इन-आउट-बैक बाउंसी प्रभावों के लिए शामिल हैं। हॉवर स्टेट अनुभाग आपको यह परिभाषित करने देता है कि हॉवर पर क्या बदलता है - पृष्ठभूमि रंग, स्केल, बॉर्डर त्रिज्या, और घूर्णन - इसलिए आप वास्तविक समय में पूर्वावलोकन तत्व पर होवर करके ट्रांज़िशन को देख सकते हैं और उसका परीक्षण कर सकते हैं।
Why Use सीएसएस ट्रांज़िशन जनरेटर?
-
संपत्ति लक्ष्यीकरण के साथ पूर्ण ट्रांज़िशन नियंत्रण
-
बाउंसी और कस्टम ईज़िंग के लिए बिल्ट-इन क्यूबिक-बीज़र प्रीसेट
-
वास्तविक समय परीक्षण के लिए इंटरैक्टिव हॉवर पूर्वावलोकन
-
बेस और हॉवर राज्य दोनों CSS कोड उत्पन्न करता है
Common Use Cases
बटन हॉवर प्रभाव
इंटरैक्टिव बटनों के लिए चिकनी रंग और स्केल ट्रांज़िशन बनाएं।
कार्ड इंटरएक्शन
कार्ड हॉवर राज्यों में लिफ्ट और शैडो ट्रांज़िशन जोड़ें।
मेनू एनिमेशन
ड्रॉपडाउन मेनू और नेविगेशन तत्वों के लिए चिकनी ट्रांज़िशन।
फ़ॉर्म फ़ोकस राज्य
फ़ॉर्म इनपुट फ़ोकस पर बॉर्डर और शैडो परिवर्तनों को एनिमेट करें।
Technical Guide
सीएसएस ट्रांज़िशन संपत्ति ट्रांज़िशन-प्रॉपर्टी, ट्रांज़िशन-ड्यूरेशन, ट्रांज़िशन-टाइमिंग-फंक्शन और ट्रांज़िशन-डिले के लिए एक शॉर्टहैंड है। ट्रांज़िशन-प्रॉपर्टी विशिष्ट संपत्तियों को लक्षित कर सकती है या सब कुछ के लिए सभी का उपयोग कर सकती है। अवधि और विलंब सेकंड या मिलीसेकंड का उपयोग करते हैं। टाइमिंग फंक्शन गति वक्र को परिभाषित करता है: रेखीय एक निरंतर गति है, आसान शुरू में धीमी होती है और फिर तेज होती जाती है और फिर धीमी हो जाती है, आसान-इन धीमी शुरुआत करता है, आसान-बाहर समाप्ति पर धीमा हो जाता है। कस्टम वक्र cubic-bezier(x1, y1, x2, y2) फंक्शन का उपयोग करते हैं जहां चार मूल्य नियंत्रण बिंदुओं को परिभाषित करते हैं। 0-1 से अधिक यमानों के लिए ओवरशूट/बाउंस प्रभाव बनते हैं। प्रदर्शन के लिए, जब भी संभव हो, ट्रांसफॉर्म और अपारदर्शिता को परिवर्तित करें। विभिन्न गुणों के लिए अलग-अलग समय के साथ कई ट्रांज़िशन को अल्पविराम-सेपरेटेड मानों के साथ परिभाषित किया जा सकता है। ट्रांज़िशन को किसी भी संपत्ति परिवर्तन द्वारा शुरू किया जाता है, जिसमें जावास्क्रिप्ट-सेट मान और वर्ग समावेशन शामिल हैं।
Tips & Best Practices
-
1बेहतर प्रदर्शन के लिए विशिष्ट गुणों को लक्षित करने के बजाय सभी का उपयोग न करें
-
2बाउंस प्रभाव बनाने के लिए y-निर्देशांक के लिए 1 से अधिक क्यूबिक-बीज़र मान का उपयोग करें
-
3स्नैपी महसूस के लिए यूआई इंटरैक्शन के लिए ट्रांज़िशन को 300ms से कम रखें
-
4हॉवर राज्य के बजाय बेस राज्य में ट्रांज़िशन जोड़ें
Related Tools
सीएसएस बटन जनरेटर
रंगों, पैडिंग, सीमाओं, छाया और होवर प्रभावों के साथ कस्टम सीएसएस बटन डिज़ाइन करें।
🎨 CSS & Design
सीएसएस ट्रांसफ़ॉर्म प्लेग्राउंड
सीएसएस ट्रांसफ़ॉर्म के साथ प्रयोग करें, जिसमें घुमाना, स्केल करना, तिरछा करना और अनुवाद करना शामिल है, जिसमें 3डी परिप्रेक्ष्य भी शामिल है।
🎨 CSS & Design
सीएसएस एनिमेशन जनरेटर
प्रीसेट प्रभावों और अनुकूलन योग्य समय के साथ सीएसएस कीफ़्रेम एनिमेशन बनाएं।
🎨 CSS & Design
सीएसएस क्लिप पथ जनरेटर
पॉलीगन, सर्कल और एलिप्स प्रीसेट के साथ सीएसएस क्लिप-पथ आकार बनाएं।
🎨 CSS & DesignFrequently Asked Questions
Q ट्रांज़िशन और एनिमेशन के बीच क्या अंतर है?
Q क्या मैं एक से अधिक गुणों को ट्रांज़िशन कर सकता हूँ?
Q मुझे कौन सा ईज़िंग फ़ंक्शन इस्तेमाल करना चाहिए?
Q मेरी ट्रांज़िशन काम क्यों नहीं कर रही है?
Q क्या सभी CSS गुणों को ट्रांज़िशन किया जा सकता है?
About This Tool
सीएसएस ट्रांज़िशन जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.