CSS animation-fill-mode Property

Definition and Usage

animation-fill-mode This attribute specifies whether the animation effect is visible before or after the animation plays.

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

See also:

CSS3 Tutorial:CSS animatie

HTML DOM Reference Manual:animationFillMode Property

Example

Specify 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 complete.
backwards Apply the starting 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 with -webkit-, -moz-, or -o- prefixes 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-