HTML - DOM Style Object animationFillMode Property

Quiz

HTML DOM Style Object animationFillMode property specifies the style of an element when the animation is not playing or animation has ended or animation contains delay.

It overrides the default behaviour of CSS animations, which is, CSS animations affects the element only when first keyframe is played and animation stops once the last keyframe has completed.

Syntax

Given below are the syntax to get or set the animationFillMode property.

Set the animationFillMode property:

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

Get the animationFillMode property:

object.style.animationFillMode;

Property Values

Value	Description
none	It does not apply any styles to target before or after executing. It is the default value.
forwards	After an animation ends, it applies property values for the time animation ended.
backwards	It applies the property values defined in the keyframe that starts the first iteration of animation during period defined by animation delay.
both	It applies both property values, forwards as well as backwards to the animation.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents animation-fill-mode property of the element.

Example of HTML DOM Style Object 'animationFillMode' Property

The following example illustrates animationFillMode property with values as forwards and backwards.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animation-Fill-Mode Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s 3;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <button onclick="front()">Forwards</button>
    <button onclick="back()">Backwards</button>
    <div id="animation"></div>
    <script>
        function front() {
            document.getElementById("animation")
            .style.animationFillMode = "forwards";
        }
        function back() {
            document.getElementById("animation")
            .style.animationFillMode = "backwards";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationFillMode	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page