Search within TutorialsPark

CSS3 animation-fill-mode Property


To specify values applied to the animation before or after an animation.


Definition and Notes.

1. The CSS3 animation-fill-mode property is used to specify how an element should be styled at the beginning and/or end of an animation.

2. Eg: If a value changes the size during an animation, you can choose whether to preserve that size or revert to the original size.


Syntax:

CSS3 animation-fill-mode property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- It requires vendor prefixes and doesn't work in IE 9 or earlier version.

Property Values

Value Description
none Property is set to that at the initial state when the animation is finished.
forwards The property at the final state is retained.
backwards If the animation is delayed then the property of the first keyframe is applied while waiting for the animation to stop.
both The first keyframe property and the last keyframe property are applied before and after the animation

Specifications

Specs Value
Name animation-fill-mode
Value none | forwards | backwards | both
Initial Value none
Applies to block-level and inline-level elements
Javascript syntax object.style.animationFillMode="forwards"
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome


Related Examples.