CSS3 animation-fill-mode Property

Here is a brief description of how to specify the style for a HTML element in CSS3 when the animation is completed using the CSS3 animation-fill-mode property.

Explanation

Property :

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Where,
none - Default value. The animation will not apply any styles to the target element before or after it is executing.
forwards - After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended.
backwards - The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse").
both - The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:

animation-fill-mode: forwards;
animation-fill-mode: backwards;

Definition:

The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).

It takes the following values.

forwards: After the animation ends,the animation will apply the property values for the time the animation ended
backwards : The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay.

Example :