HTML DOM Style animation Property

Last Updated : 13 Jun, 2023

The style animation property makes it possible to animate transitions from one CSS style to another CSS style. It configures the timing, delay, duration, and other details of how the sequence of animation should progress. The animation contains two components, one is CSS describing the component and another is a set of keyframes that indicate the start and end states of styles.

Syntax:

It is used to return the animation property

object.style.animation

It is used to set the animation property

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

Property Values

animationName: Describes the name of the keyframe attached to the selector.
animationDuration: Describes the time and how long an animation takes place.
animationTimingFunction: Describes the speed of the animation.
animationDelay: Describes the delay before the animation will start.
animationIterationCount: Describes the number of times an animation takes place.
animationDirection: Describes if the animation should play in reverse on alternate cycles.
animationFillMode: Describes what values to apply when the animation ends.
animationPlayState: Describes whether an animation is running or paused.

Return Values: It returns a string value that represents the animation property of an element.

Example 1: In this example, we will use DOM Style animation Property

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #GFG {
            width: 90px;
            height: 90px;
            background: green;
            color: white;
            position: relative;
            text-align: center;
            /* -webkit- is used for safari browser */
            -webkit-animation: GFG_Move_1 1s infinite;
            animation: GFG_Move_1 1s infinite;
        }
        /* For Opera, Chrome and Safari browser */
        @-webkit-keyframes GFG_Move_1 {
            from {
                left: 250px;
            }
            to {
                left: 500px;
            }
        }
        /* For Opera, Chrome and Safari browser */
        @-webkit-keyframes GFG_Move_2 {
            from {
                left: 350px;
                top: 0px;
            }
            to {
                left: 350px;
                top: 200px;
            }
        }
        @keyframes GFG_Move_1 {
            from {
                left: 250px;
            }
            to {
                left: 500px;
            }
        }
        @keyframes GFG_Move_2 {
            from {
                left: 350px;
                top: 0px;
            }
            to {
                left: 350px;
                top: 200px;
            }
        }
    </style>
</head>
<body>
    <button onclick="myGeeks()">
        Change Animation
    </button>
    <p>
        Click on button to change the animation.
    </p>
    <script>
        function myGeeks() {
            /* This code run on safari browser */
            document.getElementById("GFG").style.WebkitAnimation
                = "GFG_Move_2 4s 2";
            document.getElementById("GFG").style.animation
                = "GFG_Move_2 4s 2";
        }
    </script>
    <div id="GFG">GFG</div>
</body>
</html>

Output:

Example 2: In this example, we will use DOM Style animation Property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style animation Property
    </title>
    <style>
        #GFG {
            width: 90px;
            height: 90px;
            background: green;
            position: relative;
            color: white;
            text-align: center;
            /* /* For Opera, Chrome, Safari*/
            -webkit-animation: GFG_Move_1 1s infinite;
            animation: GFG_Move_1 1s infinite;
        }
        /* For Opera, Chrome, Safari*/
        @-webkit-keyframes GFG_Move_1 {
            from {
                left: 0px;
            }
            to {
                left: 90px;
            }
        }
        /* For Opera, Chrome, Safari */
        @-webkit-keyframes GFG_Move_2 {
            from {
                top: 0px;
                background: green;
                width: 100px;
            }
            to {
                top: 200px;
                background: yellow;
                width: 150px;
                height: 150px;
            }
        }
        @keyframes GFG_Move_1 {
            from {
                left: 0px;
            }
            to {
                left: 95px;
            }
        }
        @keyframes GFG_Move_2 {
            from {
                top: 0px;
                background: green;
                width: 100px;
            }
            to {
                top: 200px;
                background: yellow;
                width: 150px;
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <button onclick="myGeeks()">
        Change Animation
    </button>
    <p>
        Click on button to change the animation.
    </p>
    <script>
        function myGeeks() {
            /* For Opera, Chrome, Safari */
            document.getElementById("GFG").style.WebkitAnimation
                = "GFG_Move_2 4s 2"
            document.getElementById("GFG").style.animation
                = "GFG_Move_2 4s 2";
        }
    </script>
    <div id="GFG">GFG</div>
</body>
</html>

Output:

Supported Browsers: The browser supported by Style animation Property are listed below:

Google Chrome 43 and above
Edge 12 and above
Internet Explorer 10.0 and above
Mozilla Firefox 16.0 and above
Opera 30.0 and above
Safari 9.0 and above

PranchalKatiyar

Improve

Article Tags :

HTML DOM Style animation Property

Similar Reads

Thank You!

What kind of Experience do you want to share?