HTML | DOM Style transition Property

The HTML DOM Style Property is used to change the appearance of any DIV element. It’s changing the appearance whenever the mouse has hovered over that element.

Syntax

  • For return the transition property:
    object.style.transition
  • For set the transition property:
    object.style.transition = "property duration timing-function 
    delay|initial|inherit"

Property Values:

Value Description
transitionProperty Name of CSS property for transition effect.
transitionDuration How much time is taken to complete the transition
transitionTimingFunction Speed of transition
transitionDelay Starting point of transition
initial Set to default value
inherit Inherit from its parent element

Example: In this example, we are creating a div tag whose CSS is defined in style tag and when you hover the mouse on div tag after clicking on submit button the CSS will change from myDIV CSS to myDIV: hover CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--this style tag defines two CSS
    the first one is the CSS define for
    the button whose id is myDiv. first
    css will show when the page is load.
    second css is used when someone 
    hover the mouse on the Div -->
    <style>
        #myDIV {
            border: 1px solid black;
            background-color: #0f9d58;
            width: 220px;
            height: 100;
  
        }
          
        #myDIV:hover {
            background-color: #228B22;
            width: 500px;
        }
    </style>
</head>
  
<body>
    <center>
    <div id="myDIV">
        <h1>GeeksForGeeks</h1>
    </div>
    <button onclick="myFunction()">submit</button>
    <script>
        // this function will find a button whose id
        // is myDIV and assign its new css according 
        // to the css define in css section
        function myFunction() {
            document.getElementById(
            "myDIV").style.WebkitTransition = "width 3s";
          
            // here all means that the transition
            // is used for all property.
          
            // 2s means that hover effect will complete
            // in 2s its the transaction duration time.
            document.getElementById(
            "myDIV").style.transition = "width 3s";
        }
    </script>
</center>
</body>
  
</html>                    

chevron_right


Output

  • Before Hover:
  • While hovering the mouse after click on submit

Note transitionDuration can be only non negative number and it can’t be zero otherwise the transaction effect will not shown.

    Instead of all we can use following css properties:

  • none: no properties get the transaction effect
  • all: this is the default value all the properties will get the transaction effect.
  • initial: Sets this property to its default value.
  • inherit: Inherits this property from its parent element.
    Supported Browsers: The browser supporte by HTML | DOM Style transition Property are listed below:

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.