HTML DOM Style animationFillMode Property

HTML Web Development Front End Technology

The animationFillMode property is used to specify how styles are applied outside the execution time i.e. after it has finished or if a delay has been specified. This is helpful in setting css animation style to an element before the animation has started and after it has ended.

Syntax

Following is the syntax for −

Setting the animationFillMode property −

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Values

Following are the values −

Value	Description
none	This makes that the animation will not apply any styles to the target element before start or after the animation has ended.It is the default value.
forwards	It applies the last key-frame style to the target element after the animation has been ended.
backwards	It applies the first key-frame style to the target element after the animation has been ended.
both	It applies both the forwards and backwards rule to the animation
Initial	For setting this property to initial value
nherit	Inherits this property from its parent element.

Example

Let us look at the example for the animationFillMode property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      height: 30px;
      width: 30px;
      background-color: orange;
      animation: small 4s;
      animation-fill-mode: forwards;
   }
   @keyframes small {
      0% {
         width: 200px;
         height: 200px;
         background-color: white;
      }
      33% {
         background-color: green;
      }
      66% {
         background-color: violet;
      }
      100% {
         background-color: darkred;
      }
   }
</style>
<script>
   function changeFillMode(){
      document.getElementById("DIV1").style.animationFillMode="backwards";
      document.getElementById("Sample").innerHTML="The animation fillmode is now backwards";
   }
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to change the above animation fillmode property</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html>