Skip to content
Related Articles

Related Articles

HTML | DOM Style transitionProperty Property
  • Last Updated : 02 Aug, 2019

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

Syntax:

  • It returns the transistionProperty property.
    object.style.transistionProperty
  • It is used to set the transistionProperty property.
    object.style.transistionProperty = "none | all | property | 
    initial | inherit"

Property Values:

  • none: Transistion effect will not applied to any element.
  • all: All elements will get transistion effect.It is a default value.
  • property: It is used to specify a comma separated values for CSS property names for the transistion effect.
  • intial: It sets the transistionProperty property to its default value.
  • inherit: This property is inherited from its parent element.

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

Example-1:






<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style transistionProperty 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 transistionProperty  Property </h2>
        
        <div id="gfg" style="color:white"
          A Computer science portal for geeks
       </div>
  
        <button type="button" onclick="geeks()">
            Click
        </button>
  
        <script>
            function geeks() {
                document.getElementById(
                  "gfg").style.transistionProperty = "all";
                
                //  for safari 3.1 to 6.0 
                document.getElementById(
                  "gfg").style.WebkitTransitionProperty = "all"; 
            }
        </script>
    </center>
</body>
  
</html>

Output:

  • Before hover:
  • After hover:

Example-2:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style transistionProperty 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 transistionProperty  Property </h2>
        
        <div id="gfg" style="color:white">
          A Computer science portal for geeks
      </div>
  
        <button type="button" onclick="geeks()">
            Click
        </button>
  
        <script>
            function geeks() {
                
                document.getElementById(
                  "gfg").style.transistionProperty =
                  "width, height";
                
                document.getElementById(
                  "gfg").style.WebkitTransitionProperty = 
                  "width, height";
            }
        </script>
    </center>
</body>
  
</html>

Output:

  • Before hover:
  • After hover:

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

  • Google Chrome 26.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 12.1
  • Apple Safari 6.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :