Creating Transitions in CSS Free web Tutorials #37
Creating Transitions in CSS
पिछले ट्यूटोरियल में, हमने एनिमेशन डिजाइन करने के लिए कीफ्रेम और एनिमेशन के बारे में सीखा। यहां हम सीखेंगे कि संक्रमण क्या हैं और उन्हें कैसे बनाया जाए। CSS ट्रांज़िशन हमें एक निश्चित अवधि में संपत्ति के मूल्यों को सुचारू रूप से बदलने की अनुमति देता है। यह CSS गुणों को बदलते समय एनीमेशन गति को नियंत्रित करने का एक तरीका प्रदान करता है।
Tut37.html के रूप में एक नई फ़ाइल बनाएं और मूल HTML कोड प्राप्त करने के लिए बॉयलरप्लेट जोड़ें। <शीर्षक> टैग में शीर्षक को CSS Transitions के रूप में दें। आइए अब आरंभ करने के लिए <body> टैग में कुछ HTML कोड जोड़ें।
<body>
<h3>This is CSS Transition Tutorial</h3>
<div class="container">
<div id="box">
This is my box
</div>
</div>
</body>
अब हम कुछ संक्रमण प्रभावों को देखने के लिए बॉक्स में कुछ CSS जोड़ेंगे-
body{
background-color: black;
}
#box{
display: flex;
height: 200px;
width: 200px;
background-color: red;
justify-content: center;
align-items: center;
}
केंद्र के रूप में संरेखित-आइटम का उपयोग यहां टेक्स्ट को बॉक्स के अंदर केंद्र में रखने के लिए किया जाता है जैसा कि नीचे दिखाया गया है।
अब हम एक हॉवर इफेक्ट बनाएंगे जो माउस पॉइंटर के बॉक्स पर होवर करने पर गुण बदल देगा।
#box:hover{
background-color: green;
}
आइए अब कुछ संक्रमण गुणों पर चर्चा करें-
ट्रांज़िशन-प्रॉपर्टी- इसका उपयोग यह तय करने के लिए किया जाता है कि हम किस ट्रांज़िशन प्रॉपर्टी का उपयोग करना चाहते हैं। उदाहरण के लिए, यदि हम बैकग्राउंड कलर को ट्रांजिशन करना चाहते हैं, तो हमें लिखना होगा-
transition-property: background-color;
ट्रांजिशन-अवधि- यदि हम परिवर्तन करने के लिए आवश्यक अवधि देखना चाहते हैं, तो हम इस संपत्ति का उपयोग कर सकते हैं। उदाहरण के लिए, यदि हम संक्रमण की अवधि 1 सेकंड के रूप में निर्धारित करते हैं, तो संक्रमण केवल 1 सेकंड में होगा।
transition-duration: 1s;
ट्रांज़िशन-टाइमिंग-फ़ंक्शन- इस प्रॉपर्टी का इस्तेमाल शुरुआत से अंत तक संक्रमण की गति तय करने के लिए किया जाता है। ये तीन प्रकार के होते हैं जो इस प्रकार हैं-
आराम से
इसे लगाने के बाद एनिमेशन धीरे-धीरे शुरू हो जाएगा और अंत की ओर तेज हो जाएगा।
आराम करो
इसे लगाने के बाद एनिमेशन तेजी से शुरू होगा और अंत तक धीमा हो जाएगा।
आसानी से बाहर निकलना
इसे लगाने के बाद एनिमेशन धीरे-धीरे शुरू होगा, फिर बीच में ही तेज हो जाएगा और धीरे-धीरे खत्म हो जाएगा।
transition-timing-function: ease-in-out;
संक्रमण-विलंब- यह वह विशेष समय अंतराल है जिसके बाद संक्रमण प्रभाव शुरू हो जाएगा। उदाहरण के लिए, यदि हम इसे 2s के रूप में सेट करते हैं, तो संक्रमण प्रभाव केवल 2 सेकंड के बाद शुरू होगा।
transition-delay: 2s;
इसके अलावा, एक शॉर्ट हैंड प्रॉपर्टी है जो हमें इन सभी ट्रांज़िशन को एक लाइन में लिखने की अनुमति देती है। इसे इस प्रकार लिखा जा सकता है-
transition: background-color 1s ease-in-out 2s;
यदि हम चाहते हैं कि सभी गुण संक्रमण के अधीन हों, तो हम लिख सकते हैं-
transition: all 1s ease-in-out 2s;
अब, हम होवर प्रभाव में कुछ और गुण इस प्रकार जोड़ सकते हैं-
#box:hover{
background-color: green;
height: 400px;
width: 400px;
border-radius: 100px;
font-size: 45px;
}
यहां, सभी गुण तदनुसार बदल जाएंगे और आप कुछ अच्छे बदलाव देखेंगे। वे सभी गुण जो रंग जैसे अपने मूल्यों को बदल सकते हैं, विभिन्न संक्रमण गुण दिखा सकते हैं। आप ऐसे विभिन्न गुणों को आजमा सकते हैं और इन संक्रमणों के प्रभावों को देख सकते हैं।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Transitions</title>
</head>
<style>
body{
background-color: black;
}
#box{
display: flex;
height: 200px;
width: 200px;
background-color: red;
justify-content: center;
align-items: center;
/* transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 2s; */
/* Transition short hand property in one line */
/* transition: background-color 1s ease-in-out 2s; */
transition: all 1s ease-in-out .3s;
}
#box:hover{
background-color: green;
height: 400px;
width: 400px;
border-radius: 100px;
font-size: 45px;
}
</style>
<body>
<h3>This is CSS Transition Tutorial</h3>
<div class="container">
<div id="box">
This is my box
</div>
</div>
</body>
</html>
