CSS Property animation-fill-mode








The animation-fill-mode property sets styles to apply for the elements when the animation is not playing.

Summary

Initial value
none
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.animationFillMode="forwards"
Animatable
no

CSS Syntax

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Property Values

none
Default value. No styles
forwards
After the animation ends, use the ending property values for the element.
backwards
Use the starting value for the element.
both
The animation will follow the rules for both forwards and backwards.

Browser compatibility

animation-fill-mode Yes 10.0 Yes Yes Yes




Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from w ww  .  j a v a2 s  . c o m-->
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    -webkit-animation: mymove 3s;            /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2;    /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: both;   /* Chrome, Safari, Opera */
    animation: mymove 3s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Click to view the demo