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>