CSS transitionduration Property (original) (raw)

CSS transition-duration Property

Last Updated : 12 Jun, 2026

The CSS transition-duration property specifies how long a transition animation takes to complete when a CSS property changes. It determines the duration of the transition effect from start to finish.

• Controls the length of the transition animation.
• Accepts time values in seconds (s) or milliseconds (ms).
• A value of 0s (default) causes the transition to occur instantly.
• Different durations can be specified for multiple transitioning properties.

**Syntax:

transition-duration: time | initial | inherit;

**Property Values:

• **time: Specifies the duration of the transition effect in seconds (s) or milliseconds (ms).
• **initial: Sets the property to its default value, which is 0s.
• **inherit: Inherits the transition-duration value from the parent element.

Examples of CSS transition-duration Property

Here are some example discussed:

**Example 1: The transition-duration: 5s property smoothly increases the width of the green box from 100px to 300px over 5 seconds when hovered.

HTML `

<style>
    div {
        width: 100px;
        height: 70px;
        background: green;
        transition-property: width;
        transition-duration: 5s;

        /* For Firefox browser */
        -webkit-transition-property: width;
        -webkit-transition-duration: 5s;
        transition-delay: .2s;
        display: inline-block;
    }

    div:hover {
        width: 300px;
    }
</style>

<h1>GeeksforGeeks</h1>

<h2>Transition Property</h2>

<div>
    <p>transition-duration: 5s</p>
</div>

`

**Output:

CSS transition-duration Property

**Example 2: The transition-duration: initial property resets the transition duration to its default value (0s), causing the width change to occur instantly when hovered.

HTML `

<style>
    div {
        width: 100px;
        height: 80px;
        background: green;
        transition-property: width;
        transition-duration: initial;

        /* For Firefox browser */
        -webkit-transition-property: width;
        -webkit-transition-duration: initial;
        transition-delay: .2s;
        display: inline-block;
    }

    div:hover {
        width: 300px;
    }
</style>

<h1>GeeksforGeeks</h1>

<h2>Transition Property</h2>

<div>
    <p>transition-duration: initial;</p>
</div>

`

**Output:

CSS transition-duration Property

**Example 3: The inherit value makes the element inherit the transition-duration from its parent element. If no duration is defined on the parent, the default value (0s) is used.

HTML `

<style>
    div {
        width: 100px;
        height: 270px;
        background: green;
        transition-property: width;
        transition-duration: inherit;
        transition-timing-function: ease-in;
        transition-delay: .2s;
        display: inline-block;
    }

    div:hover {
        width: 500px;
    }
</style>

<h1>GeeksforGeeks</h1>

<h2>Transition Property</h2>

<div>
    <p>transition-duration: inherit</p>
</div>

`

**Output:

CSS transition-duration Property