animation-fill-mode property

This topic has not yet been rated - Rate this topic

Specifies whether the effects of an animation are visible before or after it plays.

This property is read/write.

CSS Animations Module Level 3, Section 3.9

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 Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

To learn more about Cascading Style Sheets (CSS) animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.

See also

CSSStyleDeclaration
currentStyle
style
a
abbr
b
bdo
br
cite
code
em
i
img
input
kbd
label
q
samp
select
small
span
strong
sub
sup
textArea
var
address
blockQuote
div
dl
fieldSet
form
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

 

 

Build date: 11/29/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.