☚ लेसन के लिए यहाँ क्लिक करे ।

Lesson - 16

CSS3 : Animations


01. animation-name

02. animation-duration

03. animation-delay

04. animation-iteration-count

05. animation-direction

06. animation-timing-function

CSS में animation create करने से पहले आपको दो properties के बारे में जरूर पता होना चाहिए :
Keyframes : animation कैसे दिखाई देगा उसमे कितने stages होंगे और उनके styles कैसे होंगे ये keyframe से define किया जाता है|
Animation property : @keyframes बनाने के बाद उसे किसी element पर apply करने के लिए animation property का use किया जाता है|




animation-name


HTML CODE





CSS CODE





Video Output








animation-duration


HTML CODE





CSS CODE





Video Output








animation-delay


HTML CODE





CSS CODE





Video Output








animation-iteration-count


HTML CODE





CSS CODE





Video Output








animation-direction


HTML CODE





CSS CODE





Video Output





1. normal - The animation is played as normal (forwards). This is default.

2. reverse - The animation is played in reverse direction (backwards).

3. alternate - The animation is played forwards first, then backwards.

4. alternate-reverse - The animation is played backwards first, then forwards.




animation-timing-function


HTML CODE





CSS CODE





Video Output