CSS transition-duration

transition-duration is a CSS property that specifies the duration of a CSS transition. Transitions are CSS animations that occur when a CSS property changes value. The transition-duration property determines how long the transition will take to complete, in seconds (s) or milliseconds (ms).

Let's take a look at how transition-duration works with some examples.

Example 1: Basic Usage

Result:


    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: width;
      transition-duration: 1s;
    }

    .box:hover {
      width: 200px;
    }

In this example, we have a .box element that will transition its width property over 1 second when hovered over.

Example 2: Multiple Properties

Result:


    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition-property: width, height, background-color;
      transition-duration: 0.5s;
    }

    .box:hover {
      width: 200px;
      height: 200px;
      background-color: green;
    }

In this example, the .box element will transition its width, height, and background-color properties over 0.5 seconds when hovered over.

Example 3: Delayed Transition

Result:


    .box {
      width: 100px;
      height: 100px;
      background-color: yellow;
      transition-property: width;
      transition-duration: 1s;
      transition-delay: 0.5s;
    }

    .box:hover {
      width: 200px;
    }

This example introduces the transition-delay property, which delays the start of the transition by 0.5 seconds.