Style property transitionDuration in Javascript

The style property transitionDuration used to set and retrieve the effect duration which specified in seconds or milliseconds to complete transition. It returns a string that represents the transition-duration property of an element.

Syntax

 1 <element>.style.transitionDuration // to retrieve
 2 <element>.style.transitionDuration = <value> // to set

element : an HTML element to apply style property transitionDuration, it is required

value : a value for the property transitionDuration

Possible values

1. time : It specifies effect duration in seconds or milliseconds to complete transition effect, the default value is 0, no effect2. initial : It sets this property to its default value3. inherit : It inherits this property from its parent element

Style property transitionDuration

 1 <!DOCTYPE html>
 2 <html>
 3 <style>
 4 	.container {
 5 	   width: 150px;
 6 	   height: 50px;
 7 	   background: green;
 8 	   color: white;	   
 9 	   transition-duration: 2s;
 10 	}
 11 		
 12 	.container:hover {
 13 	   background: lightgray;
 14 	   height: 100px;
 15 	   color: black;
 16 	   width: 350px;
 17 	}
 18 	</style>
 19 <body>
 20 	<h1>HTML Style Object</h1>
 21 	<h2>The transitionDuration property</h2>
 22 	
 23 	<div id="content" class="container">
 24 	  Hover mouse
 25 	</div>
 26 
 27 	<p>	  
 28 	  <button onclick="applyStyle()">Apply style</button>
 29 	  <button onclick="location.reload()">Reload</button>
 30 	</p>
 31 	
 32 	<script>
 33 	function applyStyle() {
 34 	  const element = document.getElementById('content');
 35 	  element.style.transitionDuration = "1s";
 36 	}
 37 	</script>
 38 </body>
 39 </html>

In the above example, a document is created with elements that include script element. A script element define a function the retrieve an element having ID content and set style property transitionDuration to 1s (1 second) that applied on button click and the change will be visible on UI.

Style property transitionDuration

Related options for your search

HTML style object in Javascript

Style property borderBottomStyle in Javascript

Style property borderLeftStyle in Javascript

Style property borderRightStyle in Javascript

Style property borderTopStyle in Javascript

Style property borderStyle in Javascript

Style property columnRuleStyle in Javascript

Style property fontStyle in Javascript

Style property listStyleImage in Javascript

Style property listStyleType in Javascript