CSS transition-duration

The CSS transition-duration property is used to define the time to complete the transition. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: maroon;
         transition-duration: 3s;}
      div:hover{width: 280px; background-color: purple;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

Hover the mouse cursor over the box to see the transition effect.

Note - Either seconds or milliseconds used to define the transition-duration property. Use s for seconds and/or ms for milliseconds.

CSS transition-duration Syntax

The syntax of transition-duration property in CSS, is:

transition-duration: x;

The value of x should be any of the following:

time - used to define custom duration to complete the transition while changing the property value of an element. For example: 1.2s, 620ms, 1600ms, 3.2s etc.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS transition-duration Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: gray;}
      div.a{transition-duration: 1.2s;}
      div.b{transition-duration: 1200ms;}
      div.c{transition-duration: 3.4s;}
      div.d{transition-duration: 3400ms;}
      div:hover{border-radius: 50%; background-color: chocolate;}
   </style>
</head>
<body>
   
   <h2>transition-duration: 1.2s</h2>
   <div class="a"></div>

   <h2>transition-duration: 1200ms</h2>
   <div class="b"></div>

   <h2>transition-duration: 3.4s</h2>
   <div class="c"></div>

   <h2>transition-duration: 3400ms</h2>
   <div class="d"></div>
   
</body>
</html>

Output

transition-duration: 1.2s

transition-duration: 1200ms

transition-duration: 3.4s

transition-duration: 3400ms

CSS Online Test

« Previous Tutorial Next Tutorial »