CSS Transition क्या है?

CSS Transition किसी element की property में होने वाले बदलाव को धीरे और smooth तरीके से दिखाता है।

उदाहरण:

• Button पर mouse ले जाने पर उसका color धीरे-धीरे बदलना।
• Box का size धीरे बढ़ना।

Syntax:

selector {
    property: value;
    transition: property duration timing-function delay;
}

CSS Transition की मुख्य Properties

1. transition-property

यह define करता है कि किस property में animation effect आएगा।

Value	Meaning
none	कोई transition नहीं होगा
all	सभी बदलने वाली properties पर transition लगेगा
property-name	केवल दी गई property पर transition लगेगा

Example:

.box {
  transition-property: width;
}

यह केवल width change पर effect देगा।

---

2. transition-duration

यह transition की speed या समय को define करता है।

Value	Meaning
0s	कोई transition नहीं
1s	1 सेकंड में बदलाव
500ms	आधा सेकंड

Example:

.box {
  transition-duration: 2s;
}

Width या color change 2 सेकंड में होगा।

---

3. transition-timing-function

यह बताता है कि transition किस तरीके से चलेगा।

Value	Description	Speed Behavior
ease	Default value	शुरुआत और अंत में slow
linear	समान speed	पूरी तरह same speed
ease-in	धीरे शुरू होता है	Start slow
ease-out	धीरे खत्म होता है	End slow
ease-in-out	शुरुआत और अंत दोनों slow	Smooth
cubic-bezier()	Custom speed control	अपनी timing बना सकते हैं

Example:

.box {
 transition-timing-function: linear;
}

---

4. transition-delay

यह transition शुरू होने में delay देता है।

Value	Meaning
0s	तुरंत शुरू
1s	1 सेकंड बाद शुरू
500ms	आधा सेकंड बाद शुरू

Example:

.box {
 transition-delay: 1s;
}

Mouse hover करने के 1 सेकंड बाद effect शुरू होगा।

Transition Shorthand Property

सभी properties को एक line में लिख सकते हैं।

Syntax:

transition: property duration timing-function delay;

Common CSS Properties जिन पर Transition लगाया जाता है

Property	Example Change
color	Text color बदलना
background-color	Background color बदलना
width	Element की width बदलना
height	Element की height बदलना
transform	Rotate, Scale, Move करना
opacity	Transparency बदलना
border	Border बदलना
box-shadow	Shadow effect बदलना
font-size	Text size बदलना

CSS Animation क्या है?

CSS Animation एक ऐसी तकनीक है जिससे हम HTML elements में movement, color change, size change, rotation, effects आदि बिना JavaScript के बना सकते हैं।

CSS Animation में element की एक state से दूसरी state तक की movement को control किया जाता है।

उदाहरण:

• Loading spinner
• Moving text
• Image slider effects
• Button animation
• Website entrance effects

CSS Animation कैसे काम करता है?

CSS Animation मुख्य रूप से दो चीजों से काम करता है:

1. @keyframes
2. animation properties

1. @keyframes क्या है?

@keyframes animation के अलग-अलग steps define करता है।

Syntax:

@keyframes animation-name {
  from {
    /* starting style */
  }

  to {
    /* ending style */
  }
}

Example:

@keyframes moveBox {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(300px);
  }
}

यह box को left से right की तरफ move करेगा।

Animation Shorthand Property

सभी properties को एक लाइन में लिख सकते हैं।

Syntax:

animation: name duration timing-function delay iteration-count direction;

CSS Animation Properties

Property	Description (विवरण)	Example
animation-name	Animation का नाम बताता है जो @keyframes में बनाया गया है	animation-name: moveBox;
animation-duration	Animation कितने समय तक चलेगा	animation-duration: 2s;
animation-timing-function	Animation की speed को control करता है	animation-timing-function: ease;
animation-delay	Animation शुरू होने में delay देता है	animation-delay: 1s;
animation-iteration-count	Animation कितनी बार चलेगा	animation-iteration-count: infinite;
animation-direction	Animation किस दिशा में चलेगा	animation-direction: alternate;
animation-fill-mode	Animation खत्म होने के बाद element की स्थिति तय करता है	animation-fill-mode: forwards;
animation-play-state	Animation को चलाना या रोकना	animation-play-state: paused;
animation	सभी properties का shortcut	animation: move 2s infinite;

1. animation-direction

Animation की दिशा तय करता है।

Value	Description
normal	Normal direction
reverse	उल्टी दिशा
alternate	आगे और पीछे
alternate-reverse	Reverse होकर आगे

Example:

.box {
 animation-direction: alternate;
}

---

2. animation-fill-mode

Animation खत्म होने के बाद element की स्थिति।

Value	काम
none	Default
forwards	Last position पर रहेगा
backwards	Starting position लागू करेगा
both	दोनों apply करेगा

---

3. animation-play-state

Animation को रोकना या चलाना।

Value	काम
running	Animation चलेगा
paused	Animation रुक जाएगा

Example:

.box:hover {
 animation-play-state: paused;
}

इन्हे भी पढ़े :

• CSS Full course Roadmap 2026March 31, 2026
  CSS Introduction↓CSS Syntax & Basic Concepts↓Selectors↓CSS Properties↓Colors & Backgrounds↓Text & Fonts↓Box Model↓Display & Positioning↓Flexbox↓CSS Grid↓Responsive Design↓Animations & Transitions↓Advanced CSS↓CSS Frameworks↓Real Projects↓Professional Frontend Developer
• What is CSS in Hindi ? How to learn for CSS in HindiJune 19, 2026
  Types of CSS in Hindi 1. Inline CSS Inline CSS का use HTML tags के अंदर ही किया जाता है|  लेकिन इसे Style Attribute के द्वारा use किया जाता है | Syntax : Example : 2. Internal CSS Internal CSS को लिखने के लिए हमें style टैग को create करना पड़ता है, क्योंकि बिना style… Read more: What is CSS in Hindi ? How to learn for CSS in Hindi
• CSS Syntax & Basic Concepts in Hindi (basic to advanced)June 19, 2026
  CSS Syntax : Basic Syntax : Example : Explained : Parts Meaning h1 Selector (जिस element को style करना है) color Property (क्या बदलना है) blue Value (किस प्रकार बदलना है) { } CSS Declaration Block ; प्रत्येक property के बाद लगाया जाता है CSS Syntax के मुख्य भाग 1. Selector Selector यह बताता है… Read more: CSS Syntax & Basic Concepts in Hindi (basic to advanced)
• CSS Properties in Hindi (Professional website build)June 22, 2026
  CSS Property वह नियम (rule) होता है जिसके द्वारा हम HTML elements की design, style और appearance को बदलते हैं। Syntax : CSS Properties के मुख्य प्रकार 1. Color Properties 1. color Color Properties का उपयोग Text का रंग बदलने के लिए किया जाता है। Syntax : 2. background-color Background-color का उपयोग Element का background… Read more: CSS Properties in Hindi (Professional website build)
• CSS display & positioning in Hindi (Beginner to Advanced)June 22, 2026
  CSS में Display और Positioning का उपयोग HTML elements को webpage पर दिखाने और उनकी जगह (location) को नियंत्रित करने के लिए किया जाता है। 1. CSS Display Property display property यह बताती है कि कोई HTML element webpage पर किस प्रकार दिखाई देगा। Syntax: Display Property के मुख्य Types : Display Value Meaning (अर्थ)… Read more: CSS display & positioning in Hindi (Beginner to Advanced)