Animation-fill-mode

Webkit	Gecko	Trident	Presto
Experimental	Experimental	None	Experimental

animation-fill-mode: <keyword>;

When you run an animation, it will by default run, and then either stop or repeat depending on the other properties you have defined. Fill mode fixes this by ‘filling’ in the start or end with the animation. There are 4 keywords you can use when defining the animation fill mode, these are as follows:

• forwards
• backwards
• both
• none

None is the default setting. If you set the fill mode to forwards, then when the animation is supposed to end the last keyframe (at 100% or to) will be maintained. If you set the fill mode to backwards, assuming you have set animation-delay, then before the animation starts the keyframe at 0% or from will be maintained until the delay finishes. Setting fill mode to both will do both of these things.

 
animation-fill-mode: forwards;

Animation Properties

Property	Description
animation	A general all purpose animation property, consisting of a bunch of other properties.
animation-name	The name of the animation you wish to call
animation-duration	The total duration (usually in seconds) which you want the animation to last for
animation-timing-function	The timing function of the animation. This is a keyword like linear, or ease-in
animation-delay	If you wish, the animation can be delayed before beginning
animation-iteration-count	The number of times the animation should repeat
animation-direction	Whether or not the animation should play in alternative or normal cycles
animation-play-state	Whether or not the animation is running or paused
animation-fill-mode	Whether or not the animation should retain a keyframe as its final position