HTML - DOM Style Object animationIterationCount Property

Quiz

HTML DOM Style Object animationIterationCount property is used to set or return the number of times an animation should be played.

Syntax

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

Set the animationIterationCount property:

object.style.animationIterationCount= "number | infinite | initial | inherit";

Get the animationIterationCount property:

object.style.animationIterationCount;

Property Values

Value	Description
number	It specifies the number of times animation will play or repeat. The default value is 1.
infinite	It specifies that animation will play for infinite number of times.
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-iteration-count property of the element.

Example of HTML DOM Style Object 'animationIterationCount' Property

In the following example we have set the iteration count to 5 when clicked on number and click infinite for infinite repetitions.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animationIterationCount Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>
        Click on 'number' to repeat animation 
        for 5 times and chose 'infinite' for
        infinite repetitions.
    </p>
    <button onclick="number()">Number</button>
    <button onclick="infinite()">Infinite</button>
    <div id="animation"></div>
    <script>
        function number() {
            document.getElementById("animation").style
                .animationIterationCount = "5";
        }
        function infinite() {
            document.getElementById("animation").style
                .animationIterationCount = "infinite";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationIterationCount	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page