animation-fill-mode

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

animation-fill-mode

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

• Unreviewed Import

Content:

• Incomplete

• Cleanup

• Examples Best Practices

W3C Working Draft

Summary

Controls the state of animated properties before and after an animation

Overview table

Initial value	none
Applies to	all elements
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property

Syntax

• animation-fill-mode: single-animation-fill-mode

Values

single-animation-fill-mode

One of the following values: none (default), forwards, backwards, both

none

Property values do not change before the animation starts, and they return to their original state when the animation ends.

forwards

When the animation ends, properties retain the values set by the final keyframe.

backwards

If the animation is delayed by animation-delay, properties assume values set by the first keyframe while waiting for the animation to start. When the animation ends, properties revert to their original state.

both

Values set by the first and last keyframes are applied before and after the animation.

The animation-fill-mode property can be specified on its own, or as a property of the animation element. (See http://docs.webplatform.org/wiki/css/properties/animation/animation )

Examples

[Val Head's examples with tutorial video View live example]

CSS

h1 {
  animation-fill-mode: forwards;
}

Usage

The animation-fill-mode property controls the state of an element's properties before and after an animation.

If multiple values are set as a comma-separated list, each value is applied to the corresponding animation specified in the animation-name property. If the number of values exceeds the number of animations, excess values are ignored. If there are fewer values than animations, the browser cycles through them again until each animation has been assigned a fill mode.

Notes

This is an experimental specification, and therefore not completely finalized. Syntax and behavior are still subject to change in future versions.

Syntax

animation-fill-mode : none | forwards | backwards | both [ , none | forwards | backwards | both ] *

Standards information

• CSS Animations Module Level 3, Section 3.9

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	4.0 -webkit	16.0 5.0 -moz	10.0	12.1 12.0 -o	4.0 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	2.1 -webkit	7.0 -webkit	18.0 -webkit	16.0 15.0 -moz	WP 8 (IE 10)	12.1	Unsupported	3.2 -webkit

Compatibility notes

Browser	Version	Note
Internet Explorer	10.0	The -ms- prefix property is deprecated and should not be used.

See also

Related articles

Animation

• JavaScript animation

• requestAnimationFrame

• @keyframes

• css/cssom/CSSKeyframeRule

• css/cssom/CSSKeyframeRule/keyText

• css/cssom/CSSKeyframeRule/style

• css/cssom/CSSKeyframesRule

• css/cssom/CSSKeyframesRule/cssRules

• css/cssom/CSSKeyframesRule/deleteRule

• css/cssom/CSSKeyframesRule/findRule

• css/cssom/CSSKeyframesRule/insertRule

• css/cssom/CSSKeyframesRule/name

• cubic-bezier

• steps

• animation

• animation-delay

• animation-direction

• animation-duration

• animation-fill-mode

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• Animations

• transition

• transition-timing-function

• SVG animation

• Making things move with CSS3 animations

• Dynamic visual effects with CSS3 transitions

Related pages (MSDN)

• 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

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]