CSS animation-fill-mode property

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;

Try it { }

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;

Try it { }

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;

Try it { }

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;

Try it { }