Transitions in CSS ka use property values ko smoothly change karne ke liye hota hai over a specific duration. Matlab sudden change ke instead smooth animation jaisa effect milta hai.
CSS Transition Property
transition ek shorthand property hai jo in sab ko combine karta hai:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Basic Transition Example
Transition Trigger kaise hota hai
Transition tab start hota hai jab property change hoti hai, mostly pseudo-classes se:
- :hover
- :active
- :focus
- :checked
Example
Mouse hatane par element wapas smoothly original state me aa jata hai.
Multiple Property Transitions
Transition Timing Function (Speed Curve)
transition-timing-function transition ki speed define karta hai.
Values:
- ease → slow start, fast middle, slow end (default)
- linear → constant speed
- ease-in → slow start
- ease-out → slow end
- ease-in-out → slow start aur end
- cubic-bezier() → custom curve
Example
Transition Delay
Transitions in CSS (delay)
transition-delay start hone se pehle delay set karta hai.
Example
Transition + Transform
Transitions in CSS (with transform)
Individual Properties vs Shorthand
Separate properties:
Shorthand:
Transitions in CSS smooth animations create karne ke liye use hote hain jab properties change hoti hain. Ye UI ko interactive aur visually appealing banate hain without using complex animations.
