CSS Transition Generator
Configure CSS transitions with hover preview.
ट्रांज़िशन 1
माउस ले जाएं
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}इस टूल के बारे में
CSS ट्रांज़िशन जेनरेटर लक्ष्य प्रॉपर्टी, अवधि, टाइमिंग फंक्शन और विलंब सेट करके transition शॉर्टहैंड प्रॉपर्टी को कॉन्फ़िगर करने देता है। इंटरैक्टिव प्रीव्यू कोड कॉपी करने से पहले ट्रांज़िशन व्यवहार दिखाता है।
CSS ट्रांज़िशन दो CSS मानों के बीच स्मूथ स्टेट चेंज बनाते हैं, जो :hover, :focus जैसे स्यूडो-क्लास या JavaScript के माध्यम से क्लास चेंज से ट्रिगर होते हैं।
कैसे उपयोग करें
- ट्रांज़िशन करने के लिए CSS प्रॉपर्टी चुनें (या all उपयोग करें)।
- अवधि सेट करें — ट्रांज़िशन कितने समय लेता है (जैसे 0.3s)।
- एक्सेलेरेशन कर्व को नियंत्रित करने के लिए टाइमिंग फंक्शन चुनें।
- वैकल्पिक रूप से ट्रांज़िशन शुरू होने से पहले विलंब जोड़ें।
- लाइव इफेक्ट देखने के लिए प्रीव्यू बॉक्स पर माउस ले जाएं, फिर CSS कॉपी करें।
उपयोग के मामले
डेवलपर्स बटन होवर इफेक्ट, कार्ड ज़ूम और नेविगेशन लिंक में कलर चेंज के लिए ट्रांज़िशन उपयोग करते हैं। फॉर्म डिज़ाइनर इनपुट फोकस स्टाइल के लिए उपयोग करते हैं।
अक्सर पूछे जाने वाले प्रश्न
- transition और animation में क्या अंतर है? — ट्रांज़िशन स्टेट चेंज (जैसे होवर) पर प्रतिक्रिया करते हैं; एनिमेशन keyframes का उपयोग करके स्वचालित रूप से या लूप पर चलते हैं।
- क्या मैं कई प्रॉपर्टी ट्रांज़िशन कर सकता हूँ? — हाँ। कई कॉमा-सेपरेटेड प्रॉपर्टी नियम जोड़ने के लिए "ट्रांज़िशन जोड़ें" पर क्लिक करें।
- कौन सी प्रॉपर्टी ट्रांज़िशन की जा सकती हैं? — संख्यात्मक मानों वाली अधिकांश प्रॉपर्टी: opacity, color, transform, आयाम आदि। display जैसी प्रॉपर्टी ट्रांज़िशन नहीं हो सकतीं।