css transition property in hindi-css ट्रांजीशन प्रॉपर्टी क्या है?

by

हेल्लो दोस्तों आज के इस पोस्ट में आपको css transition property in hindi के बारे में बताया गया है की इसे कैसे प्रयोग करते है तो चलिए शुरू करते है

css के transition property का परिचय

transition के property को css3 में ही introduce किया गया है जिसके द्वारा आप transition के परफॉर्म को कर सकते है यह transition property आपके CSS में animation का ही एक भाग होता है

transition का वह प्रोसेस होता है जिसमे कोई भी element को अपनी एक state से दूसरी state में बदलना होता है जिसे आप example के लिए कई बार जब आप किसी भी element पर hover करते है तो उसकी अवस्था(state) आपकी बदल जाती है और उसके color आदि दूसरी प्रॉपर्टीज को बदले होती है

इसे भी पढ़े –

normally यह transition आपका इतना ज्यादा फ़ास्ट होता है की यूजर को पता ही नहीं चलता है की अप्लाई हुआ है या नहीं लेकिन आप transition property के द्वारा आप transition की speed,duration आदि को भी कण्ट्रोल कर सकते है

यह जरुरी नहीं है की transition को परफॉर्म होने के लिए आप hover आदि के pseudo classes को ही यूजर करना आवश्यक है pseudo classes के transition के लिए आप trigger के रूप में काम करती है और आप इनके बिना भी transition को परफॉर्म कर सकते है ऐसा में transition के पेज के लोड होने के बाद डिफाइन किये गए delay time के बाद शुरू होगा

css में आप transition में एक shorthand property होता है जो की इसके द्वारा आप निचे दी गयी प्रॉपर्टीज को एक ही बार में डिफाइन किया जा सकता है

  • transition-property –यह property आपका उस property को डिफाइन करने के लिए प्रयोग किया जाता है जो की जिस पर आपका transition apply होगा
  • transition-duration – इस property से आप डिफाइन किया जाता है की transition कितने देर में आपका complete हो जायेगा
  • transition-timing-function – इस property का प्रयोग आपके द्वारा आप डिफाइन करते है की transition आपका किस प्रकार होगा
  • transition-delay – इस property के द्वारा आप डिफाइन करते है की transition को कितने delay के बाद आप स्टार्ट आपका होगा

आप चाहते तो उपर दिए गए प्रॉपर्टीज के द्वारा आप भी transition के लिए अलग अलग वैल्यूज को भी डिफाइन कर सकते है परन्तु जब आप इन्हे प्रयोग करेंगे तो transition-duration property की appropriate value को अवश्य ही डिफाइन करना चाहिए नहीं तो transition को effects display नहीं होगा

transition property के css syntax

निचे आपके css के transition property का जनरल syntax आपको निचे दिया जा रहा है

transition: property duration timing-function delay;

जैसा की आप उपर दी जा रही syntax में देख सकते है की transition की property को आप 4 वैल्यूज के द्वारा डिफाइन किया जा सकता है जिसमे बारे में आपको डिटेल्स से बताया जा रहा है

property

यह value element की उस property की दिखता है की जिसमे transition के दौरान बदलाव होंगे example के लिए यदि आप transition के दौरान आपका element की width 30 pixel से आपका 70 pixel हो जाती है तो इस value के रूप में width की property को आप डिफाइन करेंगे

normally आप सभी property को इस value के रूप में ही डिफाइन करते है तो लेकिन कुछ प्रॉपर्टीज जैसे की आप display ,position,font-family आदि को इस value के रूप में डिफाइन नहीं किया जा सकता है

इस value के  रूप में आप all और none keywords को भी डिफाइन कर सकते है और जब आप यह value को all keyword के रूप में डिफाइन करते है तो यह उस element को सभी प्रॉपर्टीज पर यह transition को apply हो जाती है और जब आप value को none डिफाइन करते है तो आप किसी भी property पर transition को apply नहीं होता है

इस value को आप transition-property property के द्वारा आप separately भी डिफाइन कर सकते है

duration

duration की value के द्वारा आप वह समय को डिफाइन किया जाता है की जिसमे आप transition को complete हो जाएगी इसे seconds और milliseconds में ही डिफाइन किया जाता है

जब भी आप second में time को डिफाइन करते है तो आप time के बाद s लगाते है और जब भी आप milliseconds में time को डिफाइन करते है तो आप time के बाद ms लगाते है

transition-timing-function

transition timing function की value को transition की speed को ही डिफाइन करती है यह आप value एक function के रूप में डिफाइन की जाती है जो यह डिफाइन करती है की transition के दौरान किस प्रकार speed कम या अधिक होगा

इसलिए इसकी value को आप निचे दिया जा रहा functions को डिफाइन कर सकते है

  • ease-यह default value होता है जो की यह value बताती है की शुरआत में transition धीरे स्टार्ट होगा और उसके बाद उसी speed  बढ़ेगी और अंत में वह फिर से धीरे हो जाएगी
  • linear– यह value बताता है की शुरू से अंत तक transition की एक ही speed होगी
  • ease-in – यह value transition को बताता है की transition को धीरे धीरे स्टार्ट होगा और उसकी speed बढती जाएगी
  • ease-out – यह value यह बताती है की transition धीरे धीरे शुरू होगा
  • ease-in-out- यह value बताता है की transition को slow से स्टार्ट होगा और slow end होगा
  • step-start – इसकी यह value बताती है की transition की शुरुआत में 1 interval होगा
  • step-end – इसकी यह value बताती है की transition के end में 1 interval होगा
  • steps(int,start | end) – इस function की value से आप first argument में transition में होने वाली number of intervals को डिफाइन करते है और second argument में start या end डिफाइन किया जाता है जो को यह बताती है की intervals को स्टार्ट या end में होगा
  • cubic-bezier(n,n,n) – इस function की value के द्वारा अपनी custom speed को डिफाइन करते है

delay

इसकी यह value डिफाइन करती है की trigger होने के कितने समय के बाद आपका transition को शुरू होगा इस value को आप transition duration की तरह ही seconds  या आपकी milliseconds में  ही डिफाइन कर सकते है

जैसा की आप पहले बताया की trigger कुछ भी हो सकता है जैसे की पेज लोड या फिर आपका preudo क्लास अआदी

example of css transition property

CSS में transition property को और अच्छे से समझने के लिए आपको निचे इसका example दिया जा रहा है

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#mydiv
		{
			width: 200px;
			height: 200px;
			background: limegreen;
			transition: width 1s ease 0s,height 1s ease 0s;
		}
		#mydiv:hover
		{
			width: 400px;
			height: 400px;
		}
	</style>
</head>
<body>
<h1>css transition demo</h1>
<div id="mydiv"></div>
</body>
</html>

उपर दिए जा रहे example को आप जब भी पेज को लोड होती है तो वह green div की width और height 100px होती है

जैसे ही यूजर green div के पास यूजर अपना कर्सर को ले जाता है तो ही transition property activate हो जाती है और वह div की साइज़ को slowly इनक्रीस होकर 200px जो आपके mydiv:hover में दिया गया है वह apply हो जाता है hover का मतलब भी होता है की कोई यूजर अगर कर्सर को ले जाये तो css के mydiv:hover में css apply हो जाये

reference-https://www.w3schools.com/css/css3_transitions.asp

निवेदन:-अगर आपके लिए यह पोस्ट( css transition property in hindi ) उपयोगी लगा हो तो आप अपने दोस्तों के साथ शेयर करना न भूले और किसी भी सब्जेक्ट(css transition property in hindi) को पढने के लिए आप कमेंट्स के द्वारा अथवा ग्रुप(css transition property in hindi) के द्वारा हमें बता सकते है उस सब्जेक्ट को जल्द ही अपलोड() कर दिया जायेगा

Leave a Comment