Tidadigi Logo

CSS transition-delay Property

Thuộc tính transition-delay property trong CSS chỉ định thời gian trễ trước khi hiệu ứng transition bắt đầu. Nó kiểm soát thời điểm transition bắt đầu sau khi có sự thay đổi.

Sử dụng transition-delay để sắp xếp các transition theo trình tự. Bạn có thể đồng bộ hóa chúng với các animation hoặc sự kiện khác trên trang. Nó cho phép kiểm soát thời gian chính xác cho hiệu ứng animation.

Syntax

transition-delay: time | initial | inherit;

Property Values

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

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

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

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

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

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

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Transition-delay Property</h2>
    <div>
        <p>transition-delay: 2s</p>
    </div>
</body>
</html>

Output: 

css-transition-delay-property

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

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

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

            /* For Safari browser */
            -webkit-transition-property: width;
            -webkit-transition-duration: 5s;
            -webkit-transition-delay: initial;
            display: inline-block;
        }

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

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Transition-delay Property</h2>
    <div>
        <p>transition-delay: initial</p>
    </div>
</body>
</html>

Output: 

css-transition-delay-property

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

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

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

            /* For Safari browser */
            -webkit-transition-property: width;
            -webkit-transition-duration: 5s;
            -webkit-transition-delay: inherit;
            display: inline-block;
        }

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

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Transition-delay Property</h2>
    <div>
        <p>transition-delay: inherit</p>
    </div>
</body>
</html>

Output: 

css-transition-delay-property

Note: Giá trị mặc định cho thuộc tính transition-delay là zero.


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

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

Last Updated : 21/07/2025