animation-fill-mode:
जब animation running state में नही होता (जब एनीमेशन end हो चुका हो या उसमे कोई delay हो) तब उस element का style कैसा होगा इसे specify करने के लिए animation-fill-mode property का उपयोग होता है।
इसके values कुछ इस प्रकार हो सकते हैं:
-
forwards: जब एनीमेशन finish हो जाता है तब target element में वह style set हो जाता है जिसे हम final keyframe (100%) में define करते हैं।
-
backwards: एनीमेशनstart होने से पहले, target element पर first keyframe (0%) में define किये गया style apply हो जाता है।
-
both: element पर forwards और backwards दोनों rules apply हो जाते है।
-
none: यह default value है, by default animation शुरू होने और समाप्त होने पर target element पर कोई style apply नही होता।
Syntax: animation-fill-mode: forwards;
animation-play-state
animation-play-state property से यह specify किया जाता है की एनीमेशन play हो रहा है या paused है।
इसके values कुछ इस प्रकार हो सकते हैं:
-
playing: एनीमेशन अभी run हो रहा है
-
paused: एनीमेशन अभी paused है
Syntax: animation-play-state: paused;
Note:- Defining browser compatibility for animation property and key frames method
Use browser syntax code
-webkit- for chrome and safari versions # -webkit-animation:ak 4s infinite;
-o- for opera versions # -o-animation:ak 4s infinite;
-moz- for mozilla firefox versions # -moz-animation:ak 4s infinite;
animation-fill-mode:
When the animation is not in running state (when the animation has ended or there is a delay in it), then the animation-fill-mode property is used to specify what the style of that element will be.
Its values can be something like this:
-
forwards: When the animation is finished, the style is set in the target element which we define in the final keyframe (100%).
-
backwards: Before the animation starts, the style defined in the first keyframe (0%) is applied to the target element.
-
both: Both forwards and backward rules are applied on the element.
-
none: This is the default value, by default no style is applied to the target element when the animation starts and ends.
Syntax: animation-fill-mode: forwards;
animation-play-state
The animation-play-state property specifies whether the animation is playing or paused.
Its values can be something like this:
-
playing: एनीमेशन अभी run हो रहा है
-
paused: एनीमेशन अभी paused है
Syntax: animation-play-state: paused;
Note:- Defining browser compatibility for animation property and key frames method
Use browser syntax code
-webkit- for chrome and safari versions # -webkit-animation:ak 4s infinite;
-o- for opera versions # -o-animation:ak 4s infinite;
-moz- for mozilla firefox versions # -moz-animation:ak 4s infinite;