HTML - DOM Style Object animationPlayState Property

Quiz

HTML DOM Style Object animationPlayState property specifies whether an animation is running or paused.

Syntax

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

Set the animationPlayState property:

object.style.animationPlayState= "running | paused | initial | inherit";

Get the animationPlayState property:

object.style.animationPlayState;

Property Values

Value	Description
running	It is the default value which specifies that animation is running.
paused	It specifies animation is paused.
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-play-state property of the element.

Example of HTML DOM Style Object 'animationPlayState' Property

The following example illustrates the 'running' nand 'paused' value of animationPlayState property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animationTimingFunction Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>The animation has ease value by default.</p>
    <p>Click to get different timing functions.</p>
    <button onclick="pause()">Pause</button>
    <button onclick="run()">Run</button>
    <div id="animation"></div>
    <script>
        function pause() {
            document.getElementById("animation")
                .style.animationPlayState = "paused";
        }
        function run() {
            document.getElementById("animation")
                .style.animationPlayState = "running";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationPlayState	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page