HTML - DOM Style Object animationName Property

Quiz

HTML DOM Style Object animationName property is used to get or set the animation name for @keyframes animation.

Syntax

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

Set the animationName property:

object.style.animationName= "none | keyframename | initial | inherit";

Get the animationName property:

object.style.animationName;

Property Values

Value	Description
none	It is the default value which specifies there would be no animation.
keyframename	It specifies the name of keyframe which you want to bind to the selector.
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-name property of the element.

Example of HTML DOM Style Object 'animationName' Property

The following example changes the animation according to animation name property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animationName Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
        @keyframes down {
            from {
                top: 0px;
                width: 100px;
                height: 100px;
            }
            to {
                top: 400px;
                width: 200px;
                height: 200px;
                background: yellow
            }
        }
    </style>
</head>
<body>
    <p>Click below to change the animation.</p>
    <button onclick="fun()">Click me</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.getElementById("animation").style.animationName = "down";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationName	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page