Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style transitionProperty Property

  • Last Updated : 21 May, 2021

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
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 12.1
  • Apple Safari 6.1

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :