HTML | DOM Style transition Property
Last Updated :
14 Jul, 2022
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"
Return Values: It returns a string that represents the transition property of an element
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.
html
<!DOCTYPE html>
<html>
<head>
<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>
|
Output:
- 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 supported by HTML | DOM Style transition Property are listed below:
- Google Chrome 26 and above
- Edge 12 and above
- Firefox 16 and above
- Internet Explorer 10 and above
- Opera 12.1 and above
- Apple Safari 9 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...