CSS3 animation-fill-mode Property
Animate something moving from one place to another and have it stay there:
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */
Try it yourself »
The animation-fill-mode property is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the -webkit-animation-play-state property.
Note: The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.
Definition and Usage
The animation-fill-mode property specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay").
By default, CSS animations will not affect the element you are animating until the first keyframe is "played", and then stops affecting it once the last keyframe has completed. The animation-fill-mode property can override this behavior.
|none||Default value. The animation will not apply any styles to the target before or after it is executing|
|forwards||After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended|
|backwards||The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse")|
|both||The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
CSS3 tutorial: CSS3 Animations
Thank You For Helping Us!
Your message has been sent to W3Schools.