इस अध्याय में, आप CSS के माध्यम से अपने वेब पेज पर एनिमेशन और प्रभाव जोड़ना सीखेंगे। CSS ट्रांज़िशन और ट्रांसफॉर्मेशन का उपयोग करके, आप अपने वेब पेज के एलिमेंट्स को अधिक इंटरैक्टिव और आकर्षक बना सकते हैं। आप ट्रांज़िशन का उपयोग करके विभिन्न प्रॉपर्टीज़ में बदलाव को सुचारू रूप से कर सकते हैं और ट्रांसफॉर्मेशन का उपयोग करके एलिमेंट्स को रोटेट, स्केल और ट्रांसलेट कर सकते हैं। इसके अलावा, CSS एनीमेशन का उपयोग करके आप अपने वेब पेज पर जटिल एनिमेशन प्रभाव जोड़ सकते हैं। इस अध्याय के अंत तक, आप ट्रांज़िशन, ट्रांसफॉर्मेशन और एनीमेशन का उपयोग करके अपने वेब पेज को अधिक गतिशील और आकर्षक बनाने में सक्षम होंगे। चलिए, CSS ट्रांज़िशन और ट्रांसफॉर्मेशन की इस रोमांचक यात्रा की शुरुआत करते हैं।
ट्रांज़िशन का उपयोग (Using Transitions)
ट्रांज़िशन का परिचय (Introduction to Transitions)
CSS ट्रांज़िशन का उपयोग वेब पेज पर एलिमेंट्स के विभिन्न प्रॉपर्टीज़ में बदलाव को सुचारू रूप से करने के लिए किया जाता है। ट्रांज़िशन का मतलब है कि जब किसी एलिमेंट की किसी प्रॉपर्टी में बदलाव होता है, तो वह तुरंत बदलने के बजाय एक निश्चित समय में धीरे-धीरे बदलता है। यह उपयोगकर्ताओं को एक बेहतर और अधिक आकर्षक अनुभव प्रदान करता है।
ट्रांज़िशन प्रॉपर्टीज़ (Transition Properties)
ट्रांज़िशन को नियंत्रित करने के लिए निम्नलिखित प्रॉपर्टीज़ का उपयोग किया जाता है:
- transition-property: यह प्रॉपर्टी निर्दिष्ट करती है कि कौन सी CSS प्रॉपर्टी ट्रांज़िशन करेगी।
div { transition-property: background-color; }
- transition-duration: यह प्रॉपर्टी निर्दिष्ट करती है कि ट्रांज़िशन को पूरा करने में कितना समय लगेगा।
div { transition-duration: 2s; }
- transition-timing-function: यह प्रॉपर्टी निर्दिष्ट करती है कि ट्रांज़िशन का गति पैटर्न कैसा होगा (linear, ease, ease-in, ease-out, ease-in-out)।
div { transition-timing-function: ease; }
- transition-delay: यह प्रॉपर्टी निर्दिष्ट करती है कि ट्रांज़िशन कब शुरू होगी।
div { transition-delay: 1s; }
ट्रांज़िशन का उपयोग (Using Transitions)
ट्रांज़िशन का उपयोग करने के लिए, आप संबंधित एलिमेंट के लिए transition प्रॉपर्टी सेट कर सकते हैं। यह प्रॉपर्टी उन सभी ट्रांज़िशन प्रॉपर्टीज़ को एक साथ निर्दिष्ट कर सकती है।
उदाहरण:
div {
transition: background-color 2s ease 1s;
}
ऊपर दिए गए उदाहरण में, जब div एलिमेंट के background-color प्रॉपर्टी में बदलाव होगा, तो वह बदलाव 2 सेकंड में धीरे-धीरे होगा, एक आसान गति पैटर्न के साथ, और 1 सेकंड की देरी के बाद शुरू होगा।
उदाहरण (Examples)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि ट्रांज़िशन का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ट्रांज़िशन के उदाहरण</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 2s ease, width 2s ease;
}
.box:hover {
background-color: lightcoral;
width: 200px;
}
</style>
</head>
<body>
<h1>ट्रांज़िशन के उदाहरण</h1>
<div class="box"></div>
</body>
</html>
इस उदाहरण में, हमने एक div एलिमेंट पर ट्रांज़िशन प्रॉपर्टी का उपयोग किया है। जब आप div एलिमेंट पर होवर करेंगे, तो उसका background-color और width प्रॉपर्टी धीरे-धीरे बदल जाएंगे, जिससे एक सुचारू और आकर्षक प्रभाव मिलेगा।
ट्रांज़िशन प्रॉपर्टीज़ का सही उपयोग आपके वेब पेज के इंटरैक्शन को अधिक इंटरैक्टिव और उपयोगकर्ता के अनुकूल बना सकता है। अगले सेक्शन में, हम ट्रांसफॉर्मेशन के बारे में जानेंगे।
ट्रांसफॉर्मेशन (Transformation)
ट्रांसफॉर्मेशन का परिचय (Introduction to Transformation)
CSS ट्रांसफॉर्मेशन का उपयोग करके आप वेब पेज के एलिमेंट्स को विभिन्न तरीकों से बदल सकते हैं, जैसे कि रोटेट, स्केल, और ट्रांसलेट। ट्रांसफॉर्मेशन का उपयोग करके आप अपने वेब पेज को अधिक गतिशील और आकर्षक बना सकते हैं। ये परिवर्तन दो-डायमेंशनल और तीन-डायमेंशनल स्पेस में किए जा सकते हैं।
रोटेट (Rotate)
रोटेट का उपयोग करके आप किसी एलिमेंट को उसके केंद्र बिंदु के चारों ओर घुमा सकते हैं। रोटेशन को डिग्री में मापा जाता है, जैसे कि 45 डिग्री, 90 डिग्री, आदि।
div {
transform: rotate(45deg);
}
स्केल (Scale)
स्केल का उपयोग करके आप किसी एलिमेंट के आकार को बढ़ा या घटा सकते हैं। स्केलिंग को एक फैक्टर द्वारा निर्दिष्ट किया जाता है, जैसे कि 1.5 (150% आकार) या 0.5 (50% आकार)।
div {
transform: scale(1.5);
}
ट्रांसलेट (Translate)
ट्रांसलेट का उपयोग करके आप किसी एलिमेंट को उसकी वर्तमान स्थिति से X और Y दिशाओं में स्थानांतरित कर सकते हैं। ट्रांसलेशन को पिक्सल (px) या प्रतिशत (%) में मापा जाता है।
div {
transform: translate(50px, 100px);
}
ट्रांसफॉर्मेशन का उपयोग (Using Transformation)
ट्रांसफॉर्मेशन का उपयोग करके आप एक ही एलिमेंट पर विभिन्न प्रकार के परिवर्तन लागू कर सकते हैं। आप एक से अधिक ट्रांसफॉर्मेशन को एक साथ जोड़ सकते हैं।
उदाहरण:
div {
transform: rotate(45deg) scale(1.5) translate(50px, 100px);
}
ऊपर दिए गए उदाहरण में, div एलिमेंट को 45 डिग्री घुमाया गया है, 1.5 गुना बढ़ाया गया है, और 50 पिक्सल X दिशा में और 100 पिक्सल Y दिशा में स्थानांतरित किया गया है।
उदाहरण (Examples)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि ट्रांसफॉर्मेशन का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ट्रांसफॉर्मेशन के उदाहरण</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
transition: transform 0.5s ease;
}
.rotate:hover {
transform: rotate(45deg);
}
.scale:hover {
transform: scale(1.5);
}
.translate:hover {
transform: translate(50px, 50px);
}
.combined:hover {
transform: rotate(45deg) scale(1.5) translate(50px, 50px);
}
</style>
</head>
<body>
<h1>ट्रांसफॉर्मेशन के उदाहरण</h1>
<div class="box rotate">Rotate</div>
<div class="box scale">Scale</div>
<div class="box translate">Translate</div>
<div class="box combined">Combined</div>
</body>
</html>
इस उदाहरण में, हमने विभिन्न ट्रांसफॉर्मेशन का उपयोग करके div एलिमेंट्स पर रोटेशन, स्केलिंग, और ट्रांसलेशन लागू किया है। जब आप div एलिमेंट्स पर होवर करेंगे, तो उनके ट्रांसफॉर्मेशन प्रभाव सक्रिय हो जाएंगे, जिससे एक गतिशील और आकर्षक अनुभव मिलेगा।
ट्रांसफॉर्मेशन का सही उपयोग आपके वेब पेज के डिज़ाइन और इंटरैक्शन को अधिक प्रभावशाली बना सकता है। अगले सेक्शन में, हम CSS एनीमेशन के बारे में जानेंगे।
CSS एनीमेशन (CSS Animation)
CSS एनीमेशन का परिचय (Introduction to CSS Animation)
CSS एनीमेशन का उपयोग करके आप वेब पेज पर एलिमेंट्स में जटिल और आकर्षक एनिमेशन जोड़ सकते हैं। CSS एनीमेशन का मुख्य लाभ यह है कि आप बिना जावास्क्रिप्ट का उपयोग किए अपने वेब पेज को इंटरैक्टिव और जीवंत बना सकते हैं। एनिमेशन का उपयोग करके आप एलिमेंट्स की प्रॉपर्टीज़ को समय के साथ बदल सकते हैं, जैसे कि रंग, आकार, स्थिति, आदि।
@keyframes का उपयोग (Using @keyframes)
@keyframes नियम का उपयोग करके आप CSS एनीमेशन के विभिन्न चरणों को निर्दिष्ट कर सकते हैं। @keyframes के भीतर, आप एनिमेशन के विभिन्न चरणों में प्रॉपर्टीज़ के बदलाव को परिभाषित कर सकते हैं।
उदाहरण:
@keyframes example {
0% {
background-color: red;
left: 0px;
}
50% {
background-color: yellow;
left: 100px;
}
100% {
background-color: green;
left: 200px;
}
}
एनीमेशन प्रॉपर्टीज़ (Animation Properties)
CSS एनीमेशन को नियंत्रित करने के लिए निम्नलिखित प्रॉपर्टीज़ का उपयोग किया जाता है:
- animation-name: यह प्रॉपर्टी @keyframes के नाम को निर्दिष्ट करती है।
div { animation-name: example; }
- animation-duration: यह प्रॉपर्टी एनिमेशन को पूरा करने में लगने वाला समय निर्दिष्ट करती है।
div { animation-duration: 4s; }
- animation-timing-function: यह प्रॉपर्टी एनिमेशन का गति पैटर्न निर्दिष्ट करती है (linear, ease, ease-in, ease-out, ease-in-out)।
div { animation-timing-function: ease; }
- animation-delay: यह प्रॉपर्टी एनिमेशन कब शुरू होगी उसे निर्दिष्ट करती है।
div { animation-delay: 2s; }
- animation-iteration-count: यह प्रॉपर्टी एनिमेशन कितनी बार दोहराई जाएगी उसे निर्दिष्ट करती है।
div { animation-iteration-count: infinite; }
- animation-direction: यह प्रॉपर्टी एनिमेशन की दिशा निर्दिष्ट करती है (normal, reverse, alternate, alternate-reverse)।
div { animation-direction: alternate; }
एनीमेशन का उपयोग (Using Animation)
CSS एनीमेशन का उपयोग करने के लिए, आप संबंधित एलिमेंट के लिए animation प्रॉपर्टी सेट कर सकते हैं। यह प्रॉपर्टी उन सभी एनीमेशन प्रॉपर्टीज़ को एक साथ निर्दिष्ट कर सकती है।
उदाहरण:
div {
animation: example 4s ease 2s infinite alternate;
}
ऊपर दिए गए उदाहरण में, div एलिमेंट पर example नामक एनीमेशन लागू किया गया है, जो 4 सेकंड में पूरा होगा, एक आसान गति पैटर्न के साथ, 2 सेकंड की देरी के बाद शुरू होगा, अनंत बार दोहराया जाएगा, और हर बार दिशा बदलता रहेगा।
उदाहरण (Examples)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि CSS एनीमेशन का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS एनीमेशन के उदाहरण</title>
<style>
@keyframes example {
0% {
background-color: red;
left: 0px;
}
50% {
background-color: yellow;
left: 100px;
}
100% {
background-color: green;
left: 200px;
}
}
.box {
width: 100px;
height: 100px;
position: relative;
animation: example 4s ease 2s infinite alternate;
}
</style>
</head>
<body>
<h1>CSS एनीमेशन के उदाहरण</h1>
<div class="box"></div>
</body>
</html>
इस उदाहरण में, हमने एक div एलिमेंट पर CSS एनीमेशन लागू किया है। एनीमेशन example नामक @keyframes का अनुसरण करता है, जो 4 सेकंड में पूरा होता है, 2 सेकंड की देरी के बाद शुरू होता है, अनंत बार दोहराया जाता है, और हर बार दिशा बदलता रहता है।
CSS एनीमेशन का सही उपयोग आपके वेब पेज को अधिक इंटरैक्टिव और आकर्षक बना सकता है। अगले अध्याय में, हम CSS के अन्य महत्वपूर्ण पहलुओं के बारे में जानेंगे।
