Transitions & Animations in CSS

Modern websites sirf static content se nahi banti, balki smooth interactions aur engaging animations se user ke attention ko grab karti hain. CSS Transitions aur Animations ke through aap apne elements ko lively bana sakte ho.

1. CSS Transitions

Transition ka matlab hai ek state se dusri state tak smoothly change hona. Normally jab aap kisi property (jaise color, size) ko change karte ho toh wo instantly change ho jaata hai, lekin transition use karke aap usme smoothness la sakte ho.

Syntext:

.element {
  transition: property duration timing-function delay;
}

• property: kaun si CSS property animate hogi (color, width, opacity, etc.).
• duration: kitna time lagega (e.g., 2s, 500ms).
• timing-function: animation curve (ease, linear, ease-in, ease-out).
• delay: kitni der baad start hoga.

2. Keyframes Animations

Transitions sirf start aur end state ke liye hote hain, lekin agar aapko beech me multiple steps add karne hain toh keyframes animations use karte hain.

Syntax:

@keyframes animationName {
  0% { property: value; }
  50% { property: value; }
  100% { property: value; }
}

Example:

@keyframes moveBox {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(200px); }
  100% { transform: translateX(0); }
}
.box {
  animation: moveBox 3s infinite;
}

Box left se right move hoga aur phir wapas aayega, continuously.

3. Animation Properties

Animations ke saath kuch extra properties hoti hain jo behavior control karti hain:

• animation-delay: kitni der baad animation start hoga (e.g., 2s)
• animation-iteration-count: kitni baar chalega (1, 3, ya infinite)
• animation-direction: kis direction me chalega
• normal: default
• reverse: ulta chalega
• alternate: ek baar forward, ek baar backward
• alternate-reverse: reverse se start hoga

Example:

.ball {
  animation: bounce 2s infinite alternate;
}

Ball ek baar upar jaayega, phir neeche wapas – loop me.

4. CSS Transformations (translate, scale, rotate, skew)

Animations aur transitions ko aur powerful banane ke liye CSS transform properties use karte hain.

• translate(x,y): element ko move karta hai (e.g., translateX(50px))
• scale(x,y): size increase/decrease (e.g., scale(1.5))
• rotate(deg): element ko ghumata hai (e.g., rotate(45deg))
• skew(x,y): tilt effect deta hai (e.g., skew(20deg, 10deg))

Example:

.image:hover {
  transform: scale(1.2) rotate(10deg);
  transition: transform 0.5s ease;
}

Hover karte hi image zoom + thoda rotate hogi.

Conclusion

• Transitions: Simple hover ya state-change ke liye best.
• Keyframes Animations: Complex, multi-step animations ke liye.
• Animation Properties: Control dete hain ki animation kitni der chale aur kis direction me.
• Transformations: Elements ko move, zoom, rotate aur skew karne ke liye.

Aap in properties ko mix karke apni website ko interactive aur engaging bana sakte ho.