CSS Animations Property Kya Hoti Hai ?

CSS animations ek powerful feature hai jo kisi bhi HTML element ko dynamically move ya change karne ki suvidha deti hai bina JavaScript ya Flash ka use kiye. CSS animations ke madhyam se hum kisi element ko smoothly animate kar sakte hain, jaise ki fade-in, slide-in, bounce, rotate, waghera.

1. @keyframes – Animation Define Karna

@keyframes ek CSS rule hai jo animations define karne ke liye use hota hai. Iska use karke hum ek element ke different states (starting se ending tak) specify kar sakte hain. Ye animations ko smoothly transition karne me madad karta hai.

@keyframes animation-name {
  from {
    /* Starting state */
  }
  to {
    /* Ending state */
  }
}

Ya phir multiple states specify karne ke liye:

@keyframes animation-name {
  0% {
    /* Starting state */
  }
  50% {
    /* Mid state */
  }
  100% {
    /* Ending state */
  }
}

2. animation-name – Animation Ka Naam

div {
  animation-name: example;
}

Yahan example ek animation ka naam hai jo @keyframes ke andar define kiya gaya hai.

3. animation-duration – Animation Chalne Ka Samay

Animation-duration ek CSS property hai jo kisi animation ke chalne ka samay define karti hai. Yeh property batati hai ki ek animation kitne seconds ya milliseconds tak chalega. Agar aap “animation-duration: 2s;” set karte hain, toh animation 2 seconds tak chalega. Default value 0 hoti hai, jisme animation turant complete ho jata hai. Iska use smooth aur visually appealing transitions banane ke liye hota hai. Aap isme alag-alag values dekar animations ko tez ya dheere bana sakte hain. Multiple animations ke liye, alag durations specify kiye ja sakte hain, jisse har animation apni speed se chale.

div {
  animation-name: example;
  animation-duration: 3s;
}

4. animation-timing-function – Speed Control Karna

animation-timing-function ek CSS property hai jo ek animation ki speed ko control karti hai. Ye define karti hai ki ek animation ka motion smooth hoga ya different speeds par chalega. Yeh property easing functions ka use karti hai jaise linear, ease, ease-in, ease-out, aur ease-in-out, jo animation ki acceleration aur deceleration ko control karte hain. Custom bezier curves (cubic-bezier) aur steps() ka use karke bhi animation ka motion customize kiya ja sakta hai. Yeh ensure karta hai ki animation visually appealing aur realistic lage, jaise slow start, fast middle aur smooth end effect.

Values:

• ease (Default) – Dheere start, fast middle, slow end.
• linear – Har point pe same speed.
• ease-in – Dheere start, phir fast.
• ease-out – Fast start, dheere end.
• ease-in-out – Slow start aur slow end.

div {
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

5. animation-delay – Animation Start Hone Ka Samay :

div {
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
}

6. animation-iteration-count – Animation Kitni Baar Chalega :

animation-iteration-count ek CSS property hai jo specify karti hai ki koi animation kitni baar chalega. Iska default value 1 hota hai, lekin aap ise infinite ya kisi specific number se set kar sakte hain. Agar infinite set kiya jaye, to animation bina rukavat repeat hoti rahegi. Ye smooth aur dynamic web animations ke liye useful hai.

Values:

• 1 (Default) – Animation sirf ek baar chalega.
• infinite – Animation continuously repeat hoga.
• n (Number) – Animation n baar chalega.

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

7. animation-direction – Animation Ka Direction :

Values:

• normal (Default) – Animation forward chalega.
• reverse – Animation ulta chalega (backward).
• alternate – Ek baar forward aur ek baar backward chalega.
• alternate-reverse – Pehle backward fir forward chalega.

div {
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

8. animation-fill-mode – Animation Ke Baad Element Ka Behavior

animation-fill-mode ek CSS property hai jo animation complete hone ke baad element ka behavior define karti hai. Yeh specify karta hai ki animation ke shuru hone se pehle ya complete hone ke baad element ka style kaisa rahega. Iske options hain none, forwards, backwards, aur both, jo animation ke pre aur post states ko control karte hain.

Values:

• none (Default) – Animation complete hone ke baad element apni original state me chala jayega.
• forwards – Element animation complete hone ke baad last keyframe ka state maintain karega.
• backwards – Element animation start hone se pehle first keyframe ka state maintain karega.
• both – forwards aur backwards dono ka effect apply hoga.

div {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Is case me animation complete hone ke baad element to {} wale state me hi rahega.

9. animation-play-state – Animation Ko Stop Ya Resume Karna

animation-play-state ek CSS property hai jo animation ko stop (pause) ya resume (continue) karne ke liye use hoti hai. Jab isko paused set kiya jata hai, animation ruk jati hai, aur running set karne par wapas start ho jati hai. Yeh property interactive elements jaise hover effects aur user actions ke liye kaafi useful hoti hai.

Values:

• running (Default) – Animation play hoga.
• paused – Animation stop ho jayega.

div {
  animation-name: example;
  animation-duration: 3s;
  animation-play-state: paused;
}

Jab tak animation-play-state: running; nahi kiya jata, animation nahi chalega.

Complete Example:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Explanation:
Ek div create kiya jo bounce karega.
transform: translateY(-50px); se element upar jayega aur wapas neeche aayega.
animation-iteration-count: infinite; isko bar-bar repeat karega.

CSS animations ka use karne se aap kisi bhi webpage me interactive aur attractive effects add kar sakte hain bina JavaScript use kiye. Yeh properties aapke animations ko aur bhi zyada smooth aur user-friendly bana sakti hain.

Quiz: Test Your Knowledge on CSS Animations Property

Bonus: Practical Application!

Aaj hi apne webpage par CSS animations ka istemal karke dekhein!

CSS animations ko sahi tareeke se samajhne ke liye different properties jaise animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, aur animation-direction ka upayog karein aur apne webpage ke animations ko aur bhi attractive banayein.