Cách trì hoãn hiệu ứng Transition với CSS (transition-delay)

Thuộc tính transition-delay

Thuộc tính transition-delay cho phép **trì hoãn thời gian** trước khi hiệu ứng transition bắt đầu chạy. Giá trị tính bằng giây (s) hoặc mili-giây (ms).

Cú pháp

transition-delay: <time>;
/* Ví dụ: */
transition-delay: 1s;      /* Trì hoãn 1 giây */
transition-delay: 500ms;   /* Trì hoãn 500 mili-giây */
transition-delay: 0s, 2s;  /* Trì hoãn khác nhau cho nhiều property */

Ví dụ minh họa

Hover vào hộp xanh - độ rộng tăng sau 1 giây:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 150px;
      background: blue;
      transition: width 3s;
      transition-delay: 1s;  /* Quan trọng: delay 1s trước khi transition bắt đầu */
    }
    div:hover {
      width: 250px;
    }
  </style>
</head>
<body>
  <h1>Transition Delay Demo</h1>
  <p>Hover vào hộp dưới đây. Độ rộng sẽ thay đổi sau 1 giây.</p>
  <div></div>
</body>
</html>

Shorthand: transition

Có thể gộp trong shorthand transition (thứ tự: property | duration | timing-function | delay):

div {
  transition: width 3s ease 1s;
  /* property: width | duration: 3s | timing: ease | delay: 1s */
}

Ứng dụng thực tế

• Staggered animations: Delay tăng dần cho các item trong list (0.1s, 0.2s, 0.3s...).
• Hover intent: Tránh trigger vô tình khi chuột chỉ di chuyển qua nhanh.
• Sequencing: Kết hợp nhiều transition với delay khác nhau để tạo chuỗi hiệu ứng.

Lưu ý

Delay cũng áp dụng khi **transition kết thúc** (trở về trạng thái ban đầu). Muốn delay khác cho vào/ra, dùng transition riêng cho :hover.