Specifies whether the effects of an animation are visible before or after it plays.
This property is read/write.
  |
Syntax
animation-fill-mode : [ none | forwards | backwards | both ] [ , [ none | forwards | backwards | both ] ] *
Property values
One or more fill mode keywords, separated by commas.
none-
Initial value. There is no change to the property value between the time the animation is applied (animation-name) and the time the animation begins playing (animation-delay) or after the animation completes (animation-duration).
forwards-
The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. The last keyframe is the "to" or "100%" keyframe, unless the animation-direction property is set to "alternate" and it is a finite or even iteration count, in which case the last keyframe is the "from" or "0%" keyframe.
backwards-
The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by the animation-delay property.
both-
Both forwards and backwards fill modes are applied.
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | none |
Standards information
- CSS Animations Module Level 3, Section 3.9
Remarks
Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) animations properties. They are supported unprefixed in Internet Explorer 10 and later.
To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.
See also
- CSSStyleDeclaration
- currentStyle
- style
- a
- abbr
- acronym
- b
- bdo
- big
- br
- cite
- code
- dfn
- em
- i
- img
- input
- kbd
- label
- q
- samp
- select
- small
- span
- strong
- sub
- sup
- textArea
- tt
- var
- address
- blockQuote
- div
- dl
- fieldSet
- form
- noFrames
- noScript
- ol
- p
- pre
- table
- ul
- dd
- dt
- li
- tBody
- td
- tFoot
- th
- tHead
- tr
- button
- del
- ins
- map
- object
- script
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations
Send comments about this topic to Microsoft
Build date: 11/29/2012
