CSS Transitions Property Kya Hoti Hai?

Introduction to CSS Transitions

CSS Transitions ek powerful feature hai jo humein elements ke state change hone par smooth animation effect dene ki suvidha deti hai. Jab bhi koi property jaise color, size, opacity, ya position change hoti hai, to wo ekdum turant change hone ki jagah gradually change hoti hai, jo ki ek visually appealing effect create karta hai.

Core Transition Properties

Ek transition ko control karne ke liye mukhya roop se 4 properties hoti hain:

1. transition-property

Yeh property batati hai ki kis CSS property par transition effect apply karna hai.

/* Sirf background-color par transition apply hoga */
div { transition-property: background-color; }

/* Sabhi animatable properties par transition apply hoga */
div { transition-property: all; }

2. transition-duration

Yeh property batati hai ki transition ko complete hone me kitna samay lagega.

/* Transition 0.5 seconds tak chalega */
div { transition-duration: 0.5s; }

/* Transition 300 milliseconds tak chalega */
div { transition-duration: 300ms; }

3. transition-timing-function

Yeh property transition ki speed curve ko control karti hai, yaani animation kaise progress karega.

• ease (default): Dheere se shuru, fir tez, fir dheere se khatm.
• linear: Constant speed.
• ease-in: Dheere se shuru.
• ease-out: Dheere se khatm.

div { transition-timing-function: ease-in-out; }

4. transition-delay

Yeh property batati hai ki state change hone ke kitni der baad transition shuru hoga.

/* Transition 0.2 seconds ke baad shuru hoga */
div { transition-delay: 0.2s; }

Shorthand transition Property

Aap in sabhi properties ko ek hi transition property me likh sakte hain. Order is prakaar hai: property duration timing-function delay.

div {
  /* property | duration | timing-function | delay */
  transition: background-color 0.5s ease 0.1s;
}

Aap multiple properties ke liye transitions ko comma se separate karke bhi likh sakte hain.

div {
  transition: background-color 0.5s ease, transform 0.3s ease-out;
}

CSS Transition vs. CSS Animation

Key Takeaways

• CSS Transitions state changes par smooth animation add karte hain.
• Mukhya properties hain: transition-property, transition-duration, transition-timing-function, aur transition-delay.
• transition shorthand property ka use karna code ko clean rakhta hai.
• Transitions ko trigger karne ke liye :hover, :focus, ya JavaScript se class change jaise events ki zaroorat hoti hai.
• Simple state changes ke liye Transitions, aur complex sequences ke liye Animations ka use karein.