CSS3 animation-fill-mode Property
Animate something moving from one place to another and have it stay there:
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
Try it yourself »
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.
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
|4.0 -webkit-||15.0 -webkit-
|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
HTML DOM reference: animationFillMode property
Thank You For Helping Us!
Your message has been sent to W3Schools.