The CSS transition-duration property specifies how long a transition animation takes to complete when a CSS property changes. It determines the duration of the transition effect from start to finish.
- Controls the length of the transition animation.
- Accepts time values in seconds (s) or milliseconds (ms).
- A value of 0s (default) causes the transition to occur instantly.
- Different durations can be specified for multiple transitioning properties.
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 property to its default value, which is 0s.
- inherit: Inherits the transition-duration value from the parent element.
Examples of CSS transition-duration Property
Here are some example discussed:
Example 1: The transition-duration: 5s property smoothly increases the width of the green box from 100px to 300px over 5 seconds when hovered.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: 5s</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 2: The transition-duration: initial property resets the transition duration to its default value (0s), causing the width change to occur instantly when hovered.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: initial;</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 3: The inherit value makes the element inherit the transition-duration from its parent element. If no duration is defined on the parent, the default value (0s) is used.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-duration Property
</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-duration: inherit</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output:
