CSS transition-duration Property
The transition-duration property in CSS specifies the duration over which a transition effect occurs. It defines how long it takes for a CSS property to change from one state to another.
Syntax
transition-duration: time | initial | inherit;Property Values
- time: Specifies the duration of the transition effect in seconds (s) or milliseconds (ms).
- initial: Sets the transition-duration property to its default value, which is 0.
- inherit: Inherits the transition-duration property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<style>
div {
width: 100px;
height: 70px;
background: green;
transition-property: width;
transition-duration: 5s;
/* For Firefox browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
transition-delay: .2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: 5s</p>
</div>
</body>
</html>
Output:
CSS transition-duration Property
Example: In this example, we are using transition-duration: initial property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<style>
div {
width: 100px;
height: 80px;
background: green;
transition-property: width;
transition-duration: initial;
/* For Firefox browser */
-webkit-transition-property: width;
-webkit-transition-duration: initial;
transition-delay: .2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: initial;</p>
</div>
</body>
</html>
Output:
CSS transition-duration Property
Example 3: In this example, we are using transition-duration: inherit property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: inherit;
transition-timing-function: ease-in;
transition-delay: .2s;
display: inline-block;
}
div:hover {
width: 500px;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: inherit</p>
</div>
</body>
</html>
Output:
CSS transition-duration Property
The transition-duration property is commonly used with other transition-related properties (transition-property, transition-timing-function, transition-delay) to create smooth animations between different states of an element.
Supported Browsers: The browser supported by transition-duration property are listed below:
- Chrome 26.0+
- Microsoft Edge 12.0+
- Mozilla Firefox 16.0+
- Internet Explorer 10.0+
- Opera 12.1+
- Safari 9.0+
CSS transition-duration Property – FAQs
What does the transition-duration property define in CSS?
The transition-duration property specifies the time it takes for the transition to complete.
How do I set a transition to last 3 seconds?
You can set the duration by using transition-duration: 3s;
Can I specify different durations for different properties in a transition?
Yes, you can specify different durations for different properties by listing them with commas.
What is the default value of the transition-duration property?
The default value of the transition-duration property is 0s, meaning the transition occurs instantly by default.
How does transition-duration interact with easing functions?
The transition-duration works with easing functions to determine the pace of the transition over the specified time.
