CSS transition Property

Introduction to CSS transition Property

CSS3 में transition property introduce की गयी है जिसके द्वारा आप transition perform कर सकते है। यह property CSS में animation का ही एक part है।

Transition वह process होती है जिसमें कोई element अपनी एक state से दूसरी state में change होता है। उदाहरण के लिए कई बार जब आप किसी element पर hover करते है तो उसकी state change होती है और उसका color आदि दूसरी properties change होती है।

Normally यह transition इतना fast होता है की user को पता नहीं चलता है। लेकिन transition property द्वारा आप transition की speed, duration आदि control कर सकते है।

यह जरुरी नहीं की transition perform होने के लिए hover आदि pseudo classes को use करना आवश्यक है। Pseudo classes transition के लिए सिर्फ trigger के रूप में काम करती है। आप इनके बिना भी transition perform कर सकते है। ऐसे में transition page के load होने के बाद define किये गए delay time के बाद शुरू होगा।

CSS में transition एक shorthand property है इसके द्वारा निचे दी गयी properties को एक ही बार में define किया जाता है।

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

आप चाहे तो ऊपर दी गयी properties के द्वारा भी transition के लिए अलग अलग values define कर सकते है। लेकिन जब आप इन्हे use करें तो transition-duration property की appropriate value अवश्य define की जानी चाहिए नहीं तो transition effects display नहीं होगा।

Syntax of CSS transition Property

निचे CSS transition property का general syntax दिया जा रहा है।

transition : property duration timing-function delay;

जैसा की आप ऊपर दिए गए syntax में देख सकते है transition property को 4 values के द्वारा define किया जाता है। इनके बारे में आगे detail से बताया जा रहा है।

property

यह value element की उस property को दर्शाती है जिसमें transition के दौरान changes होंगे। उदाहरण के लिए यदि transition के दौरान element की width 30 pixel से 70 pixel हो जाती है तो इस value के रूप में आप width property को define करेंगे।

Normally आप सभी property को इस value के रूप में define कर सकते है। लेकिन कुछ properties जैसे की display, position, font-family आदि को इस value के रूप में define नहीं किया जा सकता है।

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

इस value को आप transition-property property द्वारा separately भी define कर सकते है।

duration

Duration value द्वारा वह समय define किया जाता है जिसमें transition complete हो जाएगा। इसे seconds और milliseconds में define किया जाता है।

जब आप seconds में time को define करते है तो time के बाद s लगाते है और जब आप milliseconds में time को define करते है तो time के बाद ms लगाते है।

transition-timing-function

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

  • ease - यह default value होती है। यह value बताती है की शुरआत में transition धीरे start होगा और उसके बाद उसी speed बढ़ेगी और अंत में वह फिर से धीरे हो जाएगा।
  • linear - यह value बताती है की शुरू से अंत तक transition की एक ही speed होगी।
  • ease-in - यह value बताती है की transition धीरे धीरे start होगा और उसकी speed बढ़ती जायेगी।
  • ease-out - यह value बताती है की transition धीरे धीरे end होगा।
  • ease-in-out - यह value बताती है की transition slow start होगा और 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 को define करते है और second argument में start या end define किया जाता है जो यह बताता है की intervals start या end में होगा।
  • cubic-bezier(n,n,n,n) - इस function value द्वारा अपनी custom speed define कर सकते है।

delay

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

जैसा की मैने पहले बताया trigger कुछ भी हो सकता है जैसे की page load या फिर कोई pseudo class आदि।

एक से अधिक properties के लिए transition define करने के लिए आप इन values को comma से separate करके दुबारा लिखते है।

Example of CSS transition Property

CSS transition property को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>

<head>
<title>CSS transition Property Demo</title>
<style>
#myDiv
{
   width:200px;
   height:200px;
   background-color:lime;
   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>

ऊपर दिए गए उदाहरण में जब page शुरू में load होता है तो green div की width और height 100 pixels होती है।

जैसे ही user green div पर अपना cursor लेकर जाता है तो transition property activate हो जाती है और div की size slowly increase होकर 200 pixels width और height हो जाती है।

Related Posts