CSS3 animation-fill-mode property
May 05, 2021 CSS Reference Manual
Table of contents
CSS reference manual
Definitions and usages
animation-fill-mode: Style
to apply elements when the animation is not playing.
Note: Its property value is one or more fill pattern keywords separated by commas.
| Default: | none |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animationFillMode=none |
Grammar
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
| Value | Describe |
|---|---|
| none | The default. No style |
| forwards | At the end of the animation, the end property value of the element is used. |
| backwards | Use the element's starting value. |
| both | The animation follows forward and back rules. |
Browser support
| Property | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 |
16.0
5.0 -moz- |
4.0 -webkit- |
15.0 -webkit-
12.1 12.0 -o- |
Internet Explorer 10, Firefox, and Opera support the animation-fill-mode property.
Safari and Chrome support alternative -webkit-animation-fill-mode properties.
Note: The animation-fill-mode property is not supported by Internet Explorer 9 and earlier versions.
Related pages
CSS3 tutorial: CSS3 animation