Skip to main content

सीएसएस ट्रांज़िशन जनरेटर कस्टमाइज़ करने योग्य प्रॉपर्टी, अवधि, ईजिंग, और होवर प्रभावों के साथ सीएसएस ट्रांज़िशन बनाएं।

सीएसएस ट्रांज़िशन जनरेटर illustration
🎨

सीएसएस ट्रांज़िशन जनरेटर

कस्टमाइज़ करने योग्य प्रॉपर्टी, अवधि, ईजिंग, और होवर प्रभावों के साथ सीएसएस ट्रांज़िशन बनाएं।

1

ट्रांज़िशन गुणों को सेट करें

CSS गुण, अवधि, टाइमिंग फ़ंक्शन और देरी चुनें।

2

हॉवर राज्य परिभाषित करें

हॉवर पृष्ठभूमि रंग, स्केल, बॉर्डर त्रिज्या और घुमाव सेट करें।

3

परीक्षण और कॉपी करें

पूर्वावलोकन तत्व पर हॉवर करें और ट्रांज़िशन का परीक्षण करें, फिर CSS को कॉपी करें।

Loading tool...

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

Frequently Asked Questions

Q ट्रांज़िशन और एनिमेशन के बीच क्या अंतर है?
ट्रांज़िशन को एक ट्रिगर की आवश्यकता होती है और दो राज्यों के बीच एनिमेट करता है। एनिमेशन स्वचालित रूप से चल सकता है और कई चरण हो सकते हैं।
Q क्या मैं एक से अधिक गुणों को ट्रांज़िशन कर सकता हूँ?
हाँ, अल्पविराम-सेपरेटेड मान या transition: all का उपयोग करके सभी गुणों पर प्रभाव डालें।
Q मुझे कौन सा ईज़िंग फ़ंक्शन इस्तेमाल करना चाहिए?
प्रवेश के लिए ease-out सबसे अच्छा है, निकास के लिए ease-in, राज्य परिवर्तनों के लिए ease-in-out और निरंतर गति के लिए linear।
Q मेरी ट्रांज़िशन काम क्यों नहीं कर रही है?
सुनिश्चित करें कि गुण एनिमेटेबल है, ट्रांज़िशन बेस राज्य (न कि हॉवर) पर है और आप एक विशिष्ट CSS मान बदल रहे हैं।
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.