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