Tidadigi Logo

CSS transition-duration Property

Thuộc tính transition-duration trong CSS chỉ định thời gian hiệu ứng chuyển đổi diễn ra. Nó định nghĩa thời gian một thuộc tính CSS thay đổi giữa các trạng thái.

Syntax

transition-duration: time | initial | inherit;

Property Values

  • time: Chỉ định thời lượng của hiệu ứng chuyển đổi bằng giây (s) hoặc mili giây (ms).
  • initial: Đặt thuộc tính transition-duration về giá trị mặc định là 0.
  • inherit: Kế thừa thuộc tính transition-duration từ phần tử cha của nó.

Example: 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>

    <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>
</head>

<body style="text-align:center;">

    <h1>GeeksforGeeks</h1>

    <h2>Transition Property</h2>

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

Output:

css-transition-duration-property
CSS transition-duration Property

Example: Trong ví dụ này, chúng ta sử dụng thuộc tính transition-duration: initial.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>

    <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>
</head>

<body style="text-align:center;">

    <h1>GeeksforGeeks</h1>

    <h2>Transition Property</h2>

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

Output:

css-transition-duration-property
CSS transition-duration Property

Example 3: Trong ví dụ này, chúng ta sử dụng thuộc tính transition-duration: inherit.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS transition-duration Property
    </title>

    <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>
</head>

<body style="text-align:center;">

    <h1>GeeksforGeeks</h1>

    <h2>Transition Property</h2>

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

Output: 

css-transition-duration-property
CSS transition-duration Property

Thuộc tính transition-duration thường được dùng với các thuộc tính liên quan khác. Các thuộc tính này bao gồm transition-property, transition-timing-function, transition-delay. Chúng tạo hiệu ứng mượt mà giữa các trạng thái khác nhau của một phần tử.

Supported Browsers: Các trình duyệt hỗ trợ transition-duration property được liệt kê dưới đây:

  • Chrome 26.0+
  • Microsoft Edge 12.0+
  • Mozilla Firefox 16.0+
  • Internet Explorer 10.0+
  • Opera 12.1+
  • Safari 9.0+

Last Updated : 21/07/2025