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
