CSS3 Transition Effects कैसे बनायें

आज हम इस article में CSS3 transition property के बारे में जानेंगे और इससे कुछ attractive effects create करना सीखेंगे।

कुछ समय पहले तक web designing में flash का काफी उपयोग होता था और इससे कई सारे transition effects और animations design किये जाते थे लेकिन जैसा की आपको पता है web technology में कितनी तेजी से बदलाव होते जा रहे हैं और अब समय आ गया है की हम केवल CSS3 का उपयोग कर आकर्षक designs create कर सकते हैं वो भी बिना किसी third-party plugin जैसे Flash, Silverlight आदि के।

Contents

CSS Transition Effect क्या है?

अपने website के elements को और attractive बनाने के लिए CSS transition बहुत ही useful है और इसका उपयोग करना भी आसान है, हम कुछ ही line के code से बेहतरीन transition effects design कर सकते हैं।

किसी element के style में होने वाले changes के timing को transition property के जरिये control किया जा सकता है।

उदाहरण के लिए यदि हम किसी simple menu design की बात करें तो उसमे normally जब हम किसी button पर mouse hover करते हैं तो उसका background-color change होता है यह changes तुरंत हो जाता है लेकिन यदि हम चाहते हैं की hover करने पर background color धीरे-धीरे बदले, तो इसके लिए हम CSS3 transition property का उपयोग करेंगे।

Example के लिए हमने नीचे दो boxes बनायें हैं जिसमे से एक में कोई transition use नही किया गया है जबकि दुसरे में transition duration को 3 seconds रखा गया है। आप दोनों boxes के ऊपर hover करके दोनों में अंतर देख सकते हैं।

आप इसी तरह transition effects से कई प्रकार के animations create कर सकते हैं और अपने web page की खूबसूरती बढ़ा सकते हैं।

CSS3 Transition Property

CSS में transition feature को use करने के लिए mainly चार प्रकार के properties का उपयोग होता है:

transition-property
transition-duration
transition-timing-function
transition-delay

अब चलिए इन properties को समझने की कोशिश करते हैं और जानते हैं की कौन सी property किस काम आती है:

transition-property

Transition effect create करने का सबसे पहला step होता है यह बताना की कौन से property या properties में transition effects apply करना है।

मान के चलिए यदि हम किसी element पर hover करते हैं तो उसके दो properties में changes होते हैं पहला background-color और दूसरा width, तब हमारे पास option है की हम इन दोनों properties पर या किसी एक पर transitions apply करें।

इसके लिए नीचे दिया गया syntax उपयोग किया जाता है:

transition-property: none | all | property

चलिए अब इस property के values को समझते हैं:

none: इससे कोई transition नहीं होगा
all : selected element के सभी properties पर transition effect apply होगा
property: इसकी जगह हम एक या एक से अधिक उन properties को specify करेंगे जिसपर effect apply करना है

Examples:

transition-property: none;
transition-property: all;
transition-property: background-color;
transition-property: color, height, width;

transition-duration

हम transitions में होने वाले समय को भी control कर सकते हैं इसके लिए हमें transition-duration property का use करना होगा।

इसकी value में हम list of times specify कर सकते हैं, time की unit seconds या milliseconds में हो सकती है।

इसकी initial value 0 होती है जिसका मतलब transitions में कोई भी समय नहीं लगेगा। इसका syntax कुछ इस प्रकार होगा:

transition-duration: time;

Examples:

transition-duration: 2s;
transition-duration: 2000ms;

transition-timing-function

transition-timing-function से हम यह define करते हैं की transition का style क्या होगा | इसके किये हम predefined values का उपयोग कर सकते हैं या हम cubic bezier का use कर खुद से custom style create कर सकते हैं।

इसका syntax नीचे दिया गया है:

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier(n,n,n,n);

Examples:

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.5, 0.15, 0.8);

आप नीचे उदाहरण में देख सकते हैं की ये predefined timing functions कैसे काम करते हैं| इस example में हमने 5 boxes बनाये हैं जिस पर mouse hover किया जाए तो वे 500px तक expand होते हैं और इसके लिए हमने transition duration 2 second रखा है।

transition-delay

transition-delay property से हम यह भी तय कर सकते हैं की transition कब start होगा। इसकी default value 0 होती है और transition-duration property की तरह ही seconds या milliseconds में time specify किया जाता है।

इस property का syntax कुछ इस प्रकार होगा:

transition-delay: time;

Examples:

transition-delay: 2s;
transition-delay: 3000ms, 6000ms;
transition-delay: -3s;

transition shorthand property

Transitions के लिए अगल-अलग property use करने के बजाय हम इसकी shorthand property का उपयोग कर सकते हैं इसका syntax नीचे दिया गया है:

transition: transition property;

transition shorthand property का उपयोग कर multiple transitions define कर सकते हैं इसके लिए list of properties specify करने होंगे और सभी को comma से separate करना होगा।

इसके कुछ उदाहरण आप नीचे देख सकते हैं:

transition: background-color 3s ease;
transition: 2s ease-in-out;
transition: 3s;

CSS3 Transition Examples

अब चलिए transition effects के कुछ basic examples देखते हैं:

Background Color बदलना

यह सबसे basic transition effect है| इसको समझने के लिए यहाँ नीचे दो boxes दिए गए हैं, जिनपर background-color property use कर background में blue color डाला गया है, जब इनपर hover किया जाता है उस background-color property की value change हो जाती है| पहले वाले box के लिए transition-duration 2 seconds और दुसरे के लिए 4 seconds set किया गया है| HTML

<div class="box1">box1</div>
<div class="box2">box2</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  display: inline
}
.box2 {
  padding: 70px;
  margin: 5px;
  background: #b2ebf2;
  width: 100px;
  display: inline
}
.box1 {
  transition-property: background;
  transition-duration: 2s
}
.box1:hover {
  background: #90CAF9
}
.box2:hover {
  background: #ffd54f
}
.box2 {
  transition-property: background;
  transition-duration: 4s
}

Output

Element को grow करना

इस प्रकार के transition effect में यदि element पर hover किया जाता है तब उसकी size धीरे-धीरे या तेजी से बताये गए transition duration के अनुसार से बढ़ता जाता है| इसके लिए transform property का उपयोग किया गया है| इसका example आप नीचे देख सकते हैं:

HTML

<div class="box1">Grow</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 2.5em;
  font-weight: 900
}
.box1:hover {
  transform: scale(1.3);
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}

Output

Element को Shrink करना

इस प्रकार के effect में element पर hover करने पर element की size को transform property के द्वारा shrink की जाती है| इसका example नीचे दिया गया है: HTML

<div class="box1">Shrink</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 2.5em;
  font-weight: 900
}
.box1:hover {
  transform: scale(0.5);
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}

Output

Fade In effect create करना

Fade-In effect काफी ज्यादा उपयोग होने वाला transition effect है, इसमें element की background opacity को कम रखा जाता है और जब element पर hover किया जाए तो उसकी opacity बढती जाती है| इसका एक simple example आप नीचे देख सकते हैं: HTML

<div class="box1">
Fade In</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900
}
.box1 {
  opacity: 0.5
}
.box1:hover {
  opacity: 1;
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}

Output

Element को Rotate करना

आपने पहले CSS3 transform property का उपयोग किया होगा, हम उसी property से element को rotate कर सकते हैं और transition effect बना सकते हैं| इसके लिए एक साधारण सा उदाहरण नीचे दिया गया है|

HTML

<div class="box1">Rotate</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900
}
.box1:hover {
  transform: rotate(30deg)
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}

Output

Shape Change करना

यह effect बहुत attractive होता है और इसका काफी use किया जाता है| इस प्रकार के transition effect में hover करने पर element की shape बदल जाती है| इसका एक example नीचे देख सकते हैं जिसमे हमने एक box बनाया है लेकिन जब इसपर hover किया जाता है तो इसका shape change होकर circle बन जाता है|

HTML

<div class="box1"><span>Square</span>
<span>Circle</span>
</div>

CSS


.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900
}
.after {
  display: none
}
.box1:hover {
  border-radius: 50%;
}
.box1:hover span.before {
  display: none
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}
.box1:hover span.after {
  display: block
}

Output

Shadow Add करना

यदि हम चाहते हैं की mouse hover करने पर box के चारों तरफ box shadow add हो, तब इसके लिए नीचे दिया गया code use किया जाएगा|

HTML

<div class="box1">Box Shadow</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900
}
.box1:hover {
  box-shadow: 0 5px 25px #000;
}
.box1 {
  transition-property: all;
  transition-duration: 2s;
}

Output

आज आपने इस article में CSS transition के बारे में जाना और कुछ basic transition effects बनाना सीखा जो की किसी भी website को decorate करने के लिए बहुत ही उपयोगी है।

अन्य उपयोगी Tutorials:

हमने इस article में basic CSS transition concepts पर focus किया है आप इससे समझ सकते हैं की आखिर यह काम कैसे करता है और इसका उपयोग कैसे किया जाए, यदि आप कुछ advanced effect create करना चाहते हैं तो आप और दुसरे properties के साथ transition को try करके देख सकतेहैं| आपको यह article कैसा लगा जरूर बताएं, यदि कोई सवाल पूछना हो तो आप comment box के जरिये पूछ सकते हैं|

CSS3 Transition Effects कैसे बनायें

CSS Transition Effect क्या है?

CSS3 Transition Property

transition-property

transition-duration

transition-timing-function

transition-delay

transition shorthand property

CSS3 Transition Examples

Background Color बदलना

Element को grow करना

Element को Shrink करना

Fade In effect create करना

Element को Rotate करना

Shape Change करना

Shadow Add करना

Vivek Vaishnav

Leave a ReplyCancel Reply

CSS Transition Effect क्या है?

CSS3 Transition Property

transition-property

transition-duration

transition-timing-function

transition-delay

transition shorthand property

CSS3 Transition Examples

Background Color बदलना

Element को grow करना

Element को Shrink करना

Fade In effect create करना

Element को Rotate करना

Shape Change करना

Shadow Add करना

जानकारी कैसी लगी? अपने दोस्तों के साथ शेयर जरुर करें

Vivek Vaishnav

Leave a ReplyCancel Reply