Animations in CSS

Introduction to Animations in CSS

Animations in CSS ka use hota hai web elements ko smoothly change karne ke liye over time. With CSS animations, tum bina JavaScript ke color change, movement, size change aur interactive effects create kar sakte ho.

Isliye animations in CSS modern web design ka important part hai.

How Animations in CSS Work

CSS Animations use karne ke liye 2 main steps hote hain:

1. Define Animation using @keyframes

CSS Animations me @keyframes define karta hai ki animation ke different stages me kya hoga.

from = starting state
to = ending state

2. Apply Animation to Element

CSS Animations ko element pe apply karna padta hai:

animation-name → animation ka naam
animation-duration → kitne time me complete hoga

Important: Agar duration nahi diya, to CSS animations run nahi karega (default = 0s)

Keyframes in Animations in CSS

CSS Animations me tum percentages use karke zyada control le sakte ho:

Isse CSS animations more smooth aur detailed ho jata hai.

Animating Multiple Properties in CSS

CSS Animations me ek hi time pe multiple properties change kar sakte ho:

Important Properties of Animations in CSS

animation-delay

CSS Animations me delay set karta hai:

animation-iteration-count

Ye decide karta hai ki CSS animations kitni baar chalega:

animation-timing-function

CSS Animations me speed control karta hai:

ease → slow-fast-slow
linear → same speed
ease-in → slow start
ease-out → slow end
ease-in-out → smooth both sides
cubic-bezier() → custom control

Direction Control

CSS Animations different directions me chal sakta hai:

normal: forward
reverse: backward
alternate: forward then backward
alternate-reverse: backward then forward

animation-fill-mode

Ye property define karti hai ki animation ke pehle aur baad kya hoga:

none
forwards
backwards
both

Shorthand for CSS Animations

Animations ko ek line me bhi likh sakte ho:

Order:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Key Points

CSS Animations ke liye @keyframes aur duration zaroori hai
Default duration = 0s → animation run nahi karega
Multiple properties animate ho sakti hain
Percentage use karke better control milta hai
infinite se continuous animation ban sakta hai
Shorthand code ko clean banata hai

Animations in CSS ek powerful feature hai jo websites ko interactive aur dynamic banata hai. Proper use se tum smooth transitions aur engaging UI design kar sakte ho bina JavaScript ke.