Menu Riverview Church

ANIMATION-FILL-MODE

The animation-fill-mode property 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

BACKWARDS

BOTH

FORWARDS

NONE

JS

INTERNAL

animation

animation-delay

animation-direction

animation-duration

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

EXTERNAL

World Wide Web Consortium (W3C)