Skip to content
Related Articles

Related Articles

HTML | DOM Style transitionProperty Property

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Jun, 2022
View Discussion
Improve Article
Save Article

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 on a 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: Transition effect will not applied to any element.
  • all: All elements will get transition effect.It is a default value.
  • property: It is used to specify a comma separated values 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.
Example-1: 
 

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>
 
        <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: 
 

  • Before hover: 
     

  • After hover: 
     

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>
 
        <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: 
 

  • Before hover: 
     

  • After hover: 
     

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!