Open In App

HTML | DOM Style animationFillMode Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM style animationFillMode property is used to specify the style of an element when the animation is not playing or when an animation is finished or when there is a delay in animation. The animationFillMode property can override the default behavior of CSS animations by which CSS animations affect the element when the first keyframe is “played” and then stops affecting it once the last keyframe has completed. 

Syntax:

  • For returning the animationFillMode property use the following:
object.style.animationFillMode;
  • To set the animationFillMode property use below:
object.style.animationFillMode = "none|forwards|backwards|both|
initial|inherit";

Return Values: It returns a string that represents the animation-fill-mode property of an element

Property values:

  • none: It will not apply any styles to the target before or after it is executing.
  • forwards: It will apply the property values for the time the animation ended.
  • backwards: It will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay.
  • both: It will apply the property values for forwards as well as backwards to the animation.
  • initial: It will set the property to its default value.
  • inherit: This property is inherited from its parent.

Approach: The <div> element get the style values set by the first keyframe before the animation starts during the animation delay period. 

Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: animate 2s 1;
            /* Chrome, Safari, Opera */
            animation: animate 2s 2;
        }
        /* Chrome, Safari, Opera */
         
        @-webkit-keyframes animate {
            from {
                left: 500px;
            }
            to {
                left: 0px;
            }
        }
         
        @keyframes animate {
            from {
                left: 500px;
            }
            to {
                left: 0px;
            }
        }
    </style>
</head>
 
<body>
 
    <p>Click the "Try it" button to let the
      DIV element keep the styles set by the
      last keyframe: to {left:0px;}, when
      the animation is finished.</p>
   
    <button onclick="myFunction()">Try it</button>
 
    <script>
        function myFunction() {
           
            // Code for Chrome, Safari, and Opera
            document.getElementById(
              "div1").style.WebkitAnimationFillMode =
              "backwards";
           
            document.getElementById(
              "div1").style.animationFillMode =
              "backwards";
        }
    </script>
 
    <div id="div1"></div>
 
</body>
 
</html>


Output:

  

Example-2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: animate 2s 1;
            /* Chrome, Safari, Opera */
            animation: animate 2s 2;
        }
        /* Chrome, Safari, Opera */
         
        @-webkit-keyframes animate {
            from {
                left: 0px;
            }
            to {
                left: 500px;
            }
        }
         
        @keyframes animate {
            from {
                left: 0px;
            }
            to {
                left: 500px;
            }
        }
    </style>
</head>
 
<body>
 
    <p>Click the "Try it" button to let the
      DIV element keep the styles set by the
      last keyframe: to {left:500px;}, when
      the animation is finished.
  </p>
   
    <button onclick="myFunction()">
      Try it
    </button>
 
    <script>
        function myFunction() {
           
            // Code for Chrome, Safari, and Opera
            document.getElementById(
              "div1").style.WebkitAnimationFillMode =
              "forwards";
           
            document.getElementById(
              "div1").style.animationFillMode =
              "forwards";
        }
    </script>
 
    <div id="div1"></div>
 
</body>
 
</html>


Output: 

 

Supported Browsers: The browsers supported by animationFillMode property are listed below:

  • Google Chrome 43.0 and above
  • Edge 12.0 and above
  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Safari 9.0 and above
  • Internet Explorer 10.0 and above


Last Updated : 12 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads