Open In App

HTML DOM Style transitionProperty Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 16 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads