Categories
CSS Web development

CSS transition-duration Property

CSS transition-duration Property

The CSS transition-duration property defines the speed (seconds (s) or milliseconds (ms)) a transition effect takes to complete.

Demo:

Hover over the square first (the square will change the colour and size) then, click the “Try it” button and mouse over the square again. The changes will now happen much faster! The CSS transition-duration property value has been changed from 3s to .5s.




Syntax:

transition-duration: time;

time – defines the speed (seconds (s) or milliseconds (ms)) a transition effect takes to complete. The default value is 0s.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition-property: width;
  transition-duration: 2s;
}

.square:hover {
  width: 200px;
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Hover over the square below, to see the transition effect (the transition effect will last for 2 seconds):


Enjoy coding!

Read also:

CSS Transition

CSS transition-timing-function Property

CSS animation Property