CSS Transition in Hindi (CSS Animation part 2)

0
56
CSS Transition

CSS Transition (CSS Animation part 2)

What is Transition

Transition एक शब्द या वाक्यांश है जो एक पाठ या भाषण के पैराग्राफ या वर्गों के बीच संबंध को दर्शाता है। Transition अधिक स्पष्ट या संकेतन प्रदान करके अधिक सामंजस्य प्रदान करते हैं कि कैसे विचार एक दूसरे से संबंधित होते हैं। Transition “bridges” हैं जो एक पाठक को अनुभाग से अनुभाग तक ले जाते हैं|

Transition आपको एक तत्व के दो राज्यों के बीच Transition को परिभाषित करने में सक्षम बनाता है। विभिन्न राज्यों को pseudo-classes जैसे: hover या active या गतिशील रूप से जावास्क्रिप्ट का उपयोग करके निर्धारित किया जा सकता है।

Transition गुण अल्पविराम द्वारा अलग किए गए एक या एक से अधिक single-property transitions के रूप में निर्दिष्ट किया गया है। प्रत्येक single-property transitions उस transitions का वर्णन करता है जिसे एकल संपत्ति पर लागू किया जाना चाहिए|

What is CSS Transition

CSS Transition आपको एक निश्चित अवधि में संपत्ति के मूल्यों को सुचारू रूप से बदलने की अनुमति देता है। एक Transition effect बनाने के लिए, आपको दो चीजें निर्दिष्ट करनी होंगी:
1. जिस CSS property में आप एक प्रभाव जोड़ना चाहते हैं
2. Effect की अवधि|

CSS Animation & It’s Type

CSS Transition होने के लिए, आपको कम से कम दो चीज़ों को निर्दिष्ट करना होगा – CSS संपत्ति का नाम जिसे आप संक्रमण-गुण CSS संपत्ति का उपयोग करके transition प्रभाव लागू करना चाहते हैं, और transition प्रभाव की अवधि (0 से अधिक) का उपयोग कर transition-duration CSS property.

CSS गुणों को बदलते समय CSS transitions एनीमेशन गति को नियंत्रित करने का एक तरीका प्रदान करते हैं। संपत्ति में बदलाव होने के बजाय आप तुरंत प्रभाव डालते हैं, आप समय के साथ संपत्ति में बदलाव का कारण बन सकते हैं।

CSS Transition

CSS Transition Property
1. Transition
2. Transition Property
3. Transition- duration
4. Transition-delay
5. Transition-timing function

1. Transition:- ये एक Shorthand है बाकी चारो प्रोपर्टीज का, अगर आप ये सारी प्रॉपर्टी एक ही लाइन में देना चाहते हैं तो आप Transition लगाकर सारे इफेक्ट दे सकते हैं और आप अगर अलग अलग देना चाहते हैं, तो वो भी दे सकते हैं|

2. Transition Property:- आपने किस चीज पर लगाना है Transition as like अपने width पर, कलर पर, हाइट पर, किस चीज पर Transition देनी है| आप सभी चीजों पर भी Transition दे सकते हैं, जो उस Div के अंदर आ रही हैं या आप किसी एक चीज पर भी दे सकते हैं|

3. Transition- duration:- Animation, वो आपके कितनी देर तक चलेगा उससे Transition- duration कहते हैं|Transition- duration property निर्दिष्ट करती है कि transitiion effects को पूरा करने में कितने सेकंड (सेकंड) या मिलीसेकंड (ms) लगते हैं। डिफ़ॉल्ट मान: 0s।

4. Transition-delay:- Transition कितनी देर बात चलनी शुरू हो इसमें अलग inbuilt कुछ इफेक्ट है, आप उन्हें दिखा सकते हैं, जैसे ट्रांजेक्शन की speed कैसी हो Fast or Slow, या कितनी slow etc सब functions हैं|

Example:- इस example, में हम इसमें अभी width बढ़ाएँगे, और देखते हैं transition का यूज कैसे करते हैं|

<html>
<head>
<title> CSS Transition </title>
<style>
body {
font-family:arial,helvetica;
}
#box{
width: 150px;
height: 150px;
background: pink;
transition-property: width;
transition-duration: 2s;
}
#box:hover{
width: 300px;
}
</style>
</head>
<body>
<h1> CGMaster Group </h1>
<div id=”box”></div>
</body>
</html>

हमने एक function बना लिया है। इसमें एक box लिया है div में और box का selector बना लिया है| अब हम सबसे पहले प्रॉपर्टी जिसका नाम है Transition Property लेंगे। अब इसमें हम जैसे सिर्फ width में चेंज करना चाहते हैं, तो हम यहाँ देंगे width, फिर इसके साथ एक प्रॉपर्टी यूज करनी जरूरी है जिसमें बताना होगा, कि कितना duration में इसका एनिमेशन को चलना होगा| एनिमेशन कितनी देर तक चलती रहे, उसके लिए हम Transition- duration की प्रॉपर्टी का यूज करेंगे।

अब मैंने इसमें hover लगा दिया है जैसे ही बॉक्स के ऊपर माउस आये तो width चेंजिंग हो, तो width हमने चेंज करके 100px कर दी है| इस प्रोग्राम को रन करके देख सकते हैं|

किसी ऑब्जेक्ट में smoothness देने के लिए हम Transition का यूज़ करते हैं|

अब Transition हमने अभी सिर्फ width में दी है| अब मैं अगर hover में जाकर हाइट भी चेंज कर दूं तो हाइट जो ट्रांजेक्शन होगी वो एक दम होगी| मगर width की Transition smooth होगी| अब अगर आप हाइट में भी smoothness देना चाहते हैं, तो हम width के आगे लिख देंगे Height और duration सेट कर देंगे और प्ले करके देख सकते हैं|

<html>
<head>
<title> CSS Transition </title>
<style>
body {
font-family:arial,helvetica;
}
#box{
width: 150px;
height: 150px;
background: pink;
transition-property: width, height;
transition-duration: 2s, 4s;
}
#box:hover{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1> CGMaster Group </h1>
<div id=”box”></div>
</body>
</html>

अब अगर आपको कलर भी चेंज करने है तो हम हाइट के बाद background लिख देंगे, duration सेट कर देंगे और hover में बैकग्राउंड कलर सेट कर देंगे और save करके प्ले करके देखेंगे|

<html>
<head>
<title> CSS Transition </title>
<style>
body {
font-family:arial,helvetica;
}
#box{
width: 150px;
height: 150px;
background: pink;
transition-property: width, height, background;
transition-duration: 2s, 4s, 2s;
}
#box:hover{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<h1> CGMaster Group </h1>
<div id=”box”></div>
</body>
</html>

अगर आपको दोनों प्रॉपर्टी एक ही लाइन में देनी होगी तो उसके लिए हम shorthand फंक्शन transition का use करेंगे| Transition के अंदर एक ही लाइन में सारी प्रॉपर्टी हम define कर देंगे और save करके प्ले करके देख सकते हैं| Shorthand को लिखने का तरीका होता है पहले आप प्रॉपर्टी लेंगे फिर उसके बाद आप यहाँ पर उसकी duration बताएंगे|

<html>
<head>
<title> CSS Transition </title>
<style>
body {
font-family:arial,helvetica;
}
#box{
width: 150px;
height: 150px;
background: pink;
transition: width, height, background 2s, 4s, 2s;
}
#box:hover{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<h1> CGMaster Group </h1>
<div id=”box”></div>
</body>
</html>

CSS Transition-timing function

आप smoothness को कितना फास्ट या स्लो कर सकते हैं, तो आप यहां CSS Transition-timing function का यूज़ कर सकते है| नीचे के diagram में CSS Transition-timing function की कुछ inbuilt values दी गयी है|

CSS Transition
इसमें सबसे पहले है Ease. यह default वैल्यू भी होती है| इसमें slow starting होती है, बीच में फास्ट होती है और लास्ट में फिर स्पीड स्लो हो जाती है|

उसके बाद आता है Linear. Linear में स्टार्ट से एंड तक एक ही स्पीड रहती है|

उसके बाद है ease in, इसमें सिर्फ स्टार्टिंग स्लो होती है उसके बाद normal स्पीड हो जाती है|

Ease out, स्लो end होता है| स्टार्टिंग से middle तक की जो एनीमेशन स्पीड होती है वो नार्मल होती है और लास्ट में स्लो हो जाती है, Ease out में|

उसके बाद ease-in-out होता है| उसमें स्टार्टिंग और एंड दोनों ही स्लो रहते हैं और उसके बाद Step-start, Step-start में एकदम से जहाँ से animation स्टार्ट होनी है वहाँ चली जाती है| Step-end में जहाँ एनिमेशन एंड होना है वहां एकदम चली जाती है|

Steps (4,end) इसमें आप जितने चाहे उतने स्टेप्स बना सकते हैं| Next Cubic-bezier, इसमें आप स्टेप्स में स्पीड डिज़ाइन कर सकते हैं|

उसके रियल टाइम एग्जाम्पल देखने के लिए मैं यहाँ एक लिंक दे रही हूं वेबसाइट का Cubic bezier इस पर क्लिक करके आप इस वेबसाइट में रियल टाइम उदाहरण देख सकते हैं| वहाँ आप लाइब्रेरी में जो भी इफेक्ट्स सेलेक्ट करके उसे प्ले करेंगे उसका output आप देख सकते हैं|

हम इस फंक्शन को अपने प्रोग्राम में भी लगा के देख सकते हैं इसके लिए मैंने एक प्रोग्राम बना लिया है इसमें मैंने Transition-timing function की प्रॉपर्टी लगा दी है और सारे effects को यूज़ करके देख सकते हैं|

<html>
<head>
<title> CSS Transition </title>
<style>
body {
font-family:arial,helvetica;
}
#box{
width: 150px;
height: 150px;
background: pink;
transition-property: width, height;
transition-duration: 2s, 4s;
transition-timing-function: ease;
}
#box:hover{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<h1> CGMaster Group </h1>
<div id=”box”></div>
</body>
</html>

Transition Effects (वीडियो संपादन और प्रस्तुति सॉफ्टवेयर में) दृश्य को एक दृश्य से दूसरे में बदलने की एक विधि। Transition Effects ग्राफिक्स को गति के एक तत्व को प्रस्तुत करके एक प्रस्तुति के लिए दृश्य ब्याज दे सकता है।
एकाधिक गुणों को परिवर्तित करने के लिए, transition multiple properties के भीतर गुणों की अल्पविराम-पृथक सूची जोड़ें। एक ही अवधि में सभी निर्दिष्ट गुणों को बदलने के लिए, transition-duration के लिए केवल एक मूल्य शामिल करें। कई transition अवधि को परिभाषित करते समय मूल्यों का क्रम महत्वपूर्ण है।

सामान्य रूप से जब CSS property का मूल्य बदलता है, तो प्रभावित परिणामों को तुरंत अद्यतन किया जाता है, जिससे प्रभावित तत्व तुरंत पुरानी संपत्ति के मूल्य से नए संपत्ति मूल्य में बदल जाते हैं। यह अनुभाग नए सीएसएस गुणों का उपयोग करके transition को निर्दिष्ट करने का एक तरीका बताता है। इन गुणों का उपयोग पुराने राज्य से समय के साथ नए राज्य में आसानी से चेतन करने के लिए किया जाता है।

उदाहरण के लिए, मान लीजिए कि एक सेकंड के transition को बाईं और पृष्ठभूमि-रंग गुणों पर परिभाषित किया गया है। इस मामले में इसे दाईं ओर ले जाना और पृष्ठभूमि को लाल से नीले रंग में बदलना है। यह मानता है कि अन्य transition पैरामीटर अभी भी उनके डिफ़ॉल्ट मान हैं।

CSS Transition एक प्रस्तुति प्रभाव है। पुराने मूल्य से नए मूल्य पर समय के साथ संपत्ति के CSS transition का गणना मूल्य। इसलिए यदि कोई स्क्रिप्ट किसी संपत्ति के परिकलित मूल्य पर सवाल उठाती है, क्योंकि वह transition कर रही है, तो यह एक मध्यवर्ती मूल्य देखेगा जो संपत्ति के वर्तमान एनिमेटेड मूल्य का प्रतिनिधित्व करता है। एक property के लिए CSS transition कई नई संपत्तियों का उपयोग करके परिभाषित किया गया है। उदाहरण के लिए:

div {
transition-property: opacity;
transition-duration: 2s;
}

उपरोक्त उदाहरण opacity property पर एक transition को परिभाषित करता है कि, जब एक नया मूल्य इसे सौंपा जाता है, तो दो सेकंड की अवधि में पुराने मूल्य और नए मूल्य के बीच एक smooth बदलाव का कारण होगा।

LEAVE A REPLY

Please enter your comment!
Please enter your name here