Javascript DOM CSS Style animationFillMode Property

Introduction

Changing the animationFillMode property of a <div> element: 

document.getElementById("myDIV").style.animationFillMode = "forwards";

Click the button to let the DIV element keep the styles set by the last keyframe: to {left:200px;}, when the animation is finished.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*  w  ww. j  ava2s. co  m*/
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 2s 2;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myDIV").style.animationFillMode = "forwards";
}
</script>
<div id="myDIV"></div>

</body>
</html>

The animationFillMode property sets what styles will apply for the element when the animation is not playing, finished or delayed.

Property Values

Value Description
none Default value. The animation will not apply any styles to the target before or after it is executing
forwards After the animation ends, 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.
both The animation will follow the rules for both forwards and backwards.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The animationFillMode property returns a String, representing the animation-fill-mode property of an element.




PreviousNext

Related