CSS animation-fill-mode Property

Definition and Usage

animation-fill-mode The attribute specifies whether the animation effect is visible before or after the animation is played.

Note:The attribute values are one or more fill mode keywords separated by commas.

See also:

CSS3 Tutorial:CSS Animation

HTML DOM Reference Manual:animationFillMode Property

Example

Specifies the fill mode for the h1 element:

h1
  {
  animation-fill-mode: forwards;
  }

CSS Syntax

animation-fill-mode : none | forwards | backwards | both;
Value Description
none Do not change the default behavior.
forwards Maintain the last property value (defined in the last keyframe) after the animation is completed.
backwards Apply the start property values (defined in the first keyframe) before the animation is displayed for the duration specified by animation-delay.
both Both forward and backward fill modes are applied.

Technical Details

Default Value: none
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.animationFillMode = none

Browser Support

The numbers in the table indicate the first browser version that fully supports the property.

Numbers prefixed with -webkit-, -moz-, or -o- indicate the first version using the prefix.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.1
12.0 -o-