CSS3 animation-fill-mode Property
Animate something moving from one place to another and have it stay there:
-webkit-animation-fill-mode: backwards|; /* Chrome, Safari, Opera */
Definition and Usage
The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior.
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 element before or after it is executing|
|backwards|||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 backwards| and backwards. That is, it will extend the animation properties in both directions|
|initial||Sets this property to its default value. initial|
|inherit||Inherits this property from its parent element. inherit|