Javascript Reference - HTML DOM Style animationFillMode Property

The animationFillMode property gets and sets what styles will apply for the element when the animation is finished, or when it has a delay.

Browser Support


`animationFillMode`	Yes	10.0	Yes	Yes	Yes

Syntax

Return the animationFillMode property:

object.style.animationFillMode

Set the animationFillMode property:

object.style.animationFillMode='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.

Technical Details

Default Value:	none
Return Value:	A string representing the animation-fill-mode property
CSS Version	CSS3

Example

The following code shows how to change the animationFillMode property of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from ww  w.j ava2 s .  c  om-->
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 2s 1;  /* Chrome, Safari, Opera */
    animation: mymove 2s 2;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationFillMode = "forwards";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationFillMode = "forwards";
}
</script>
<div id="myDIV"></div>
</body>
</html>

The code above is rendered as follows: