transition-duration Archives

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!