Thuộc tính transition-delay

Thuộc tính transition-delay thiết lập độ trễ trước khi bắt đầu chuyển tiếp mượt transition.

Cú pháp

cssbộ chọn {
  transition-delay: thời gian theo s hoặc ms;
}

Giá trị

Giá trị mặc định: 0s.

Ví dụ

Di chuột lên khối - 3 giây sẽ không có gì xảy ra (có độ trễ là 3s), sau đó nó sẽ thay đổi mượt mà độ rộng của mình trong 2 giây. Nếu sau đó di chuột ra - thì lại 3 giây sẽ không có gì xảy ra, sau đó độ rộng sẽ giảm mượt mà về giá trị ban đầu:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  transition-delay: 3s;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Ví dụ

Di chuột lên khối - đầu tiên nó sẽ thay đổi độ rộng của mình trong 2 giây, sau đó thay đổi chiều cao của mình trong 4 giây. Các thuộc tính sẽ thay đổi tuần tự, vì đối với chiều cao được đặt độ trễ là 3 giây (thời gian thay đổi độ rộng). Nếu di chuột ra - thì các thay đổi sẽ diễn ra theo thứ tự ngược lại: đầu tiên độ rộng giảm, sau đó chiều cao giảm:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

Xem thêm