Specifies whether the effects of an animation are visible before or after it plays.
This property is read/write.
animation-fill-mode : [ none | forwards | backwards | both ] [ , [ none | forwards | backwards | both ] ] *
One or more fill mode keywords, separated by commas.
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).
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.
Both forwards and backwards fill modes are applied.
|Applies To||block-level and inline-level elements|
- CSS Animations Module Level 3, Section 3.9
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.
As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-animation-fill-mode" as an alias for this property.
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations