CSS Transitions In Hindi
सीएसएस ट्रांज़िशन आपको एचटीएमएल वेबपेज में सीएसएस के किसी भी एलिमेंट में अलग-अलग स्टाइल्स के स्मूथ, आर्डर ट्रांजीशन स्टार्ट टू एन्ड ट्रांजीशन, इफ़ेक्ट को अप्लाई करने में हेल्प करता है। सीएसएस ट्रांज़िशन से आप एक पर्टिकुलर वेबपेज एलिमेंट के बिहैवियर एलिमेंट को कण्ट्रोल, स्पीड कण्ट्रोल, यूजर बिहैवियर, ऑब्जेक्ट विजुअल प्रेजेंटेशन आदि को सीएसएस ट्रांजीशन इफ़ेक्ट से मैन्युअल कण्ट्रोल और मैनेज कर सकते है. सीएसएस ट्रांजीशन इफ़ेक्ट आपके वेबसाइट विजिबिलिटी, यूजर एक्सपेरिएंस, और वेबसाइट यूजर अनुभव को बेहतर करता है।
So let’s understand CSS transition effect behaviour in HTML web page in a better way.
Basic CSS transition syntax.
किसी भी एचटीएमएल वेबपेज में सीएसएस ट्रांज़िशन इफ़ेक्ट को लागू करने के लिए, आपको सीएसएस ट्रांजीशन प्रॉपर्टीज को पहले उन एलिमेंट में डिफाइन करना होगा। जिन्हें आप अपने मौजूदा एचटीएमएल वेबपेज एलिमेंट के लिए एनिमेट या ट्रांजीशन इफ़ेक्ट को मैन्युअल अप्लाई करना चाहते हैं. जहा सबसे पहले आपको उस ट्रांजीशन और एनीमेशन की स्टार्ट टू एन्ड टाइम को मैनेज करना होता है।
The basic syntax of transition in HTML web page.
selector type {
transition: property duration timing-function delay;
}
CSS transition properties in HTML web page.
सीएसएस ट्रांज़िशन प्रॉपर्टीज किसी भी एचटीएमएल वेबपेज में डिजायर ऑब्जेक्ट या एलिमेंट को सीएसएस ट्रांज़िशन के माध्यम से ट्रांज़िशन इफ़ेक्ट अप्लाई करना चाहते हैं. जहा आप, बेसिक सीएसएस ट्रांज़िशन इफ़ेक्ट में (एलिमेंट विड्थ, एलिमेंट हाइट, ऑब्जेक्ट बैकग्राउंड-कलर), आदि इफ़ेक्ट को अप्लाई कर सकते है। यहाँ आप अपनी वेब डेवलपमेंट जरूरत के अनुसार सभी वेबपेज एलिमेंट में सीएसएस ट्रांज़िशन इफ़ेक्ट को अप्लाई कर के लिए आल सीएसएस ट्रांज़िशन ऐट्रिब्यूट्स को मैन्युअल अप्लाई कर सकते हैं।
CSS Transition Attributes.
- CSS Transition Duration – मौजूदा एचटीएमएल वेबपेज एलिमेंट में सीएसएस ट्रांज़िशन में पूरा डिस्प्ले होने वाला समय है. जैसे, (0.5s, से 200ms) टाइम मिलि सेकण्ड्स में है।
- CSS transition timing-function – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन की कर्व स्पीड को डिफाइन करता है। याद रहे की, यह एक रेगुलर यूज़ कॉमन वैल्यू हैं.
- CSS transition ease-in – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन स्पीड स्लो से स्टार्ट होता है. धीरे स्पीड ग्रो करता है, और अंत में अपने आप ट्रांजीशन स्लो हो जाता है।
- CSS transition linear – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन स्थिर गति को इंडीकेट करता है।
- CSS transition ease-in – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन को स्लो स्पीड से मूव करता है।
- CSS transition ease-out – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन फास्टली स्टार्ट करता है, और फिर अपने आप स्लो हो जाता है।
- CSS transition ease-in-out – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन स्लो स्टार्ट होता है, और फिर स्वत टर्मिनेट हो जाता है।
- CSS transition delay – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में सीएसएस ट्रांज़िशन इफ़ेक्ट को डिले करने के लिए है. जैसे, (0s, से 300ms) मिली सेकण्ड्स है।
Example of CSS transition in HTML element.
तो चलिए हम एक बटन होवर ट्रांजीशन इफ़ेक्ट के साथ एक ट्रांजीशन एक्साम्प्ल को ट्राय करे।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Button Transitions Effect Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-color: black;
}
.transition-button {
padding: 20px 40px;
font-size: 18px;
color: yellow;
background-color: teal;
border: 10px;
border-radius: 80px;
font-family:times new roman;
cursor: pointer;
transition: background-color 0.4s ease, transform 0.4s ease; /* Add transition on background color and transform */
}
.transition-button:hover {
background-color: red; /* display button red color when it hover mouse */
transform: scale(1.40); /* it increase font size */
}
</style>
</head>
<body>
<button class=”transition-button”>Click And See Transition Effect</button>
</body>
</html>
Css Styles Files.
body {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-color: black;
}
.transition-button {
padding: 20px 40px;
font-size: 18px;
color: yellow;
background-color: teal;
border: 10px;
border-radius: 80px;
font-family:times new roman;
cursor: pointer;
transition: background-color 0.4s ease, transform 0.4s ease; /* Add transition on background color and transform */
}
.transition-button:hover {
background-color: red; /* display button red color when it hover mouse */
transform: scale(1.40); /* it increase font size */
}
CSS Multiple Transition Effects in HTML Webpage.
आप सीएसएस ट्रांज़िशन प्रॉपर्टीज को अल्पविराम से अलग अलग करके कई वेबपेज एलिमेंट में सीएसएस ट्रांज़िशन इफ़ेक्ट को अप्लाई कर सकते हैं।
CSS Multiple Transition Effects Example.
.transition-button {
transition: background-color 0.4s ease, transform 0.4s ease, color 0.4s ease; /* set multiple transition */
}
CSS Transition Other Properties in HTML Webpage Element.
आप अपनी वेब पेज डेवलपमेंट अन्य प्रॉपर्टीज में सीएसएस ट्रांज़िशन प्रॉपर्टीज को अप्लाई कर सकते हैं. जैसे,
CSS other transition properties attributes.
- Opacity CSS transitions – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में फीके सीएसएस ट्रांज़िशन इफ़ेक्ट के लिए उपयोग करे।
- Position CSS transitions – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में पोजीशन सीएसएस ट्रांज़िशन वैल्यू में परिवर्तन के साथ कंबाइंड उपयोग किया जाता है।
- Size CSS transitions – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में पोजीशन सीएसएस ट्रांज़िशन चौड़ाई और ऊँचाई में परिवर्तन के लिए उपयोग किया जाता है।
- Transform CSS transitions – यह मौजूदा वेबपेज में एचटीएमएल एलिमेंट में पोजीशन सीएसएस ट्रांज़िशन स्केलिंग, रोटेट आदि के लिए उपयोग करे।
Example of HTML opacity transition.
.fade {
opacity: 0; /* set css object 0 opacity */
transition: opacity 0.7s ease;
}
.fade-visible {
opacity: 1; /* set css transition object 1 opacity */
}
Use of JavaScript to trigger HTML web page transitions.
आप अपने वेब पेज में ट्रांजीशन को ट्रिगर करने वाली क्लासेज को ऐड या रिमूव के लिए जावास्क्रिप्ट कोड को भी अप्लाई कर सकते है.
const button = document.querySelector(‘.transition-button’);
button.addEventListener(‘click Me’, () => {
button.classList.toggle(‘fade-visible’);
});
CSS Transitions in HTML Element Conclusion.
एचटीएमएल वेबपेज में सीएसएस ट्रांज़िशन इफ़ेक्ट एक अट्रैक्टिव और इंटरैक्टिव वेबसाइट यूजर इंटरफ़ेस बनाने के लिए एक पावरफुल टूल्स है। जहा आप विभिन्न सीएसएस एलिमेंट प्रॉपर्टी पर मल्टीप्ल ट्रांज़िशन इफ़ेक्ट लागू करके। आप अपने वेब पेज एलिमेंट को विज़ुअल रिप्रेजेंट कर सकते हैं. जिससे वेब यूजर एक्सपेरिएंस को बेहतर बनाया जा सके।
