animationFillMode Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationFillMode

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. animationFillMode

Description

The animationFillMode property sets what styles to use when the animation is finished or delayed.

Property Values

Value Description
none Default value. The animation will not apply any styles before or after it is running
forwards After the animation ends, apply the property values
backwards apply style values defined in the starting keyframe
both extend the animation properties in both back and forth
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the animation-fill-mode property of an element
CSS VersionCSS3

Example

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from  w  w w.  j  av  a2 s .c  o m*/
    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>

Related Tutorials