CSS animation-fill-mode property
Description
It applies CSS properties to an element that are picked from the start of first animation cycle or from the end of last animation cycle during the idle time i.e. during the animation delay.
Observe the start and end of the cycle and match it with the @keyframes to understand.
Syntax
animation-fill-mode : none | forwards | backwards | both
Property values
noneDefault
-
It does not apply CSS properties to the element during the idle time i.e. during the animation delay.
animation-fill-mode: none;
forwards
-
It applies property values that are picked from the end of the last completed animation cycle in case of more than one cycles. There is gray color at the end of the cycle.
If animation-iteration-count is 0, it applies CSS properties that are picked from the start of an animation cycle.
animation-fill-mode: forwards;
backwards
-
In this case, the applied properties are picked from the start of the first animation cycle. There is red color at the start of cycle.
These values are picked either from the 'from' in case of normal or 'to' in case of reverse.
animation-fill-mode: backwards;
both
-
It represents the effect of both forwards and backwards i.e. the applied properties are picked from the start of the first animation cycle and from the end of last animation cycle.
animation-fill-mode: both;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
