HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

animation-fill-mode

Description

The animation-fill-mode property for CSS defines what values are applied by the animation outside the time it is executing.

Syntax

CSS

animation-fill-mode: value;

JS

object.style.animationFillMode = "value";

Values

<'animation-fill-mode'> = <single-animation-fill-mode>#
<single-animation-fill-mode> = none | forwards | backwards | both
none

The animation has no effect when it is applied but not executing.

forwards

After the animation ends, the animation will apply the property values for the time the animation ended.

backwards

During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation.

both

The effects of both forwards and backwards fill apply.

Initial

none

Examples

1 · backwards

2 · both

3 · forwards

4 · none

5 · JS