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

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

Giá trị

Giá trị	Mô tả
`s`	Xác định thời gian theo giây (ví dụ `3s`). Có thể xác định giá trị phân số, ví dụ, `0.5s` - nửa giây.
`ms`	Xác định thời gian theo mili giây (ví dụ `3ms`). Một giây là `1000` mili giây.

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:

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

#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:

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

#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

thuộc tính transition-property,
xác định tên thuộc tính cho chuyển tiếp mượt
thuộc tính transition-duration,
xác định thời lượng của chuyển tiếp mượt
thuộc tính transition-timing-function,
xác định hàm thời gian cho chuyển tiếp mượt
thuộc tính transition,
là dạng viết tắt cho chuyển tiếp mượt
thuộc tính animation,
dùng để tạo hoạt ảnh