CSS Animations Property Kya Hai?

Introduction to CSS Animations

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

1. The @keyframes Rule

Animation banane ka sabse pehla step @keyframes rule ko define karna hai. Is rule ke andar hum animation ke alag-alag stages (states) ko define karte hain. Hum from (0%) aur to (100%) keywords ya percentages ka use karke animation ka sequence batate hain.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

2. Animation Properties

Ek baar @keyframes define karne ke baad, hum in properties ka use karke use element par apply karte hain.

A. animation-name

Yeh property @keyframes rule ka naam batati hai jise hum apply karna chahte hain.

div { animation-name: slide-in; }

B. animation-duration

Yeh batati hai ki animation ko ek cycle pura karne me kitna samay lagega.

div { animation-duration: 2s; }

C. animation-timing-function

Yeh property animation ki speed curve ko control karti hai. Common values hain: linear, ease, ease-in, ease-out.

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

D. animation-delay

Yeh batati hai ki animation shuru hone se pehle kitna wait karna hai.

div { animation-delay: 1s; }

E. animation-iteration-count

Yeh batati hai ki animation kitni baar chalega. Iski value infinite bhi ho sakti hai.

div { animation-iteration-count: infinite; }

F. animation-direction

Yeh animation ka direction control karti hai (e.g., normal, reverse, alternate).

div { animation-direction: alternate; }

G. animation-fill-mode

Yeh batati hai ki animation ke khatm hone ke baad element ka style kya hoga. forwards value se element last keyframe ka style le leta hai.

div { animation-fill-mode: forwards; }

3. The Shorthand animation Property

Aap in sabhi properties ko ek hi animation property me likh sakte hain.

div {
  /* name | duration | timing-function | delay | iteration-count | direction | fill-mode */
  animation: slide-in 2s ease-out 1s infinite alternate forwards;
}

Key Takeaways

• CSS Animations @keyframes rule se define hoti hain.
• Animations ko multiple stages (using percentages) me define kiya ja sakta hai.
• animation-name aur animation-duration sabse zaroori properties hain.
• animation-iteration-count: infinite; se animation hamesha chalta rehta hai.
• animation-direction: alternate; se animation smooth forward aur backward loop banata hai.
• Shorthand animation property ka use karke code ko clean rakhein.