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

#CSS digger
Was this article helpful?

 
×

Ctrl+D