CSS transition-duration set a duration of time in seconds or milliseconds, a transition effect takes place.
You can set the different transition-duration of width and height. See an example below of using different transition-duration on width and height.
Syntax:
transition-duration: 2s;Source C0de:
<!DOCTYPE html>
<html>
<head>
<style>
.image1{
width:200px;
height:100px;
transition-duration: 2s; /*apply transition-duration 2s*/
}
.image1:hover{
width:400px;
height:200px;
}
</style>
</head>
<body>
<h2 class="title">CSS transition-duration</h2>
<div class="container">
<center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Hue-rotate Image" class="image1"> </center>
<p>
<center>Apply 2s transition-duration. Mouse hover on image to see the effect.</center>
</p>
</div>
</body>
</html>
Output:
Click below the “Try it Yourself” button to see the result of the CSS transition-duration.
You may be interested in the following topics:
- CSS Transition-timing-function
- CSS Transition-property
- CSS Transition-duration
- CSS Transition-delay
- CSS Transition
- CSS Transition (All Properties)