HTML DOM Style transitionProperty Property

The Style transitionProperty property in HTML DOM used to set the name of the CSS property for the transition effect. It can occur when a user hover over an element. It returns the transitionProperty property of an element.

Syntax:

It returns the transitionProperty property.

object.style.transitionProperty

It is used to set the transitionProperty property.

object.style.transitionProperty = "none | all | property | 
                                   initial | inherit"

Property Values:

none: The transition effect will not apply to any element.
all: All elements will get a transition effect. It is a default value.
property: It is used to specify a comma-separated value for CSS property names for the transition effect.
initial: It sets the transitionProperty property to its default value.
inherit: This property is inherited from its parent element.

Return Value: It returns a string representing the transitionProperty property of an element.
Example1:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style transitionProperty Property </title>
    <style>
        #gfg {
            border: 3px solid blue;
            background-color: green;
            width: 100px;
            height: 50px;
            -webkit-transition: all 2s;
            /* for safari 3.1 to 6.0 */
            transition: all 2s;
        }

        #gfg:hover {
            background-color: green;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>

    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            DOM Style transitionProperty Property
        </h2>

        <div id="gfg" style="color:white">
            A Computer science portal for geeks
        </div>
        <br>
        <button type="button" 
                onclick="geeks()">
            Click
        </button>

        <script>
            function geeks() {
                document.getElementById(
                    "gfg").style.transitionProperty = "all";

                //  for safari 3.1 to 6.0 
                document.getElementById(
                    "gfg").style.WebkitTransitionProperty = "all";
            }
        </script>
    </center>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style transitionProperty Property </title>
    <style>
        #gfg {
            border: 3px solid blue;
            background-color: green;
            width: 100px;
            height: 50px;
            -webkit-transition: all 2s;
            /* for safari */            
            transition: all 2s;
        }

        #gfg:hover {
            background-color: green;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>

    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>
            DOM Style transitionProperty Property 
        </h2>

        <div id="gfg" style="color:white">
            A Computer science portal for geeks
        </div>
        <br>
        <button type="button" 
                onclick="geeks()">
            Click
        </button>

        <script>
            function geeks() {

                document.getElementById(
                    "gfg").style.transitionProperty =
                    "width, height";

                document.getElementById(
                    "gfg").style.WebkitTransitionProperty =
                    "width, height";
            }
        </script>
    </center>
</body>

</html>

Output:

Supported Browsers: The browser supported by DOM Style transitionProperty property are listed below:

Google Chrome 26.0 and above
Edge 12.0 and above
Internet Explorer 10.0 and above
Firefox 16.0 and above
Opera 12.1 and above
Apple Safari 9 and above

HTML DOM Style transitionProperty Property

Explore