HTML - DOM Style Object animation Property

Quiz

The animation property is used to define our desired styles. We can combine properties like animation-name, animation-duration, animation-iteration-count, etc. using the animation keyword.

Syntax

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

Set the property:

object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState";

Get the property:

object.style.animation;

Property Values

Below listed values are accepted by this property.

Value	Description
animationName	It specifies the name of the keyframe which is attached to the selector. It's default value is none.
animationDuration	It specifies the time duration of an animation. It's default value is 0.
animationTimingFunction	It specifies the speed of animation. It's default value is ease.
animationDelay	It specifies the delay before start of animation. It's default value is 0.
animationIterationCount	It specifies number of times animation would repeat. It's default value is 1.
animationDirection	Tt specifies whether an animation should play in reverse on alternate cycles. It's default value is normal.
animationFillMode	It specifies values to be applied when the animation ends. It's default value is none.
animationPlayState	It specifies whether an animation is running or paused. It's default value is running.

Return Value

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

Examples of HTML DOM Style Object 'animation' Property

The following examples illustrates animation property.

Changing Animation of div Element

In the following example we have changed the movement direction of div element from (left to right) to (top to bottom).

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation 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;
            }
            to {
                top: 400px;
            }
        }
    </style>
</head>
<body>
    <p>Click to change the direction of animation.</p>
    <button onclick="fun()">Animate</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.getElementById("animation").style.animation = "down 5s 3";
        }
    </script>
</body>
</html>

Animation with Delay and Changing Size

In the following example, we have animated the div container with it's changing shape and color with delay of 2 seconds.

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object animation 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 to change the direction of animation.</p>
    <button onclick="fun()">Animate</button>
    <div id="animation"></div>
    <script>
        function fun() {
            document.getElementById("animation").style.animation = "down 5s 3 2s";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animation	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page