Thuộc tính transition

Thuộc tính transition là một dạng viết tắt cho các chuyển tiếp mượt mà, cho phép thiết lập đồng thời transition-duration, transition-property, transition-timing-function và transition-delay.

Cú pháp

bộ chọn {
	transition: giá trị;
}

Thứ tự của các giá trị không quan trọng, tuy nhiên thời gian thực hiện (transition-duration) phải đứng trước thời gian trễ (transition-delay).

Giá trị

Xem các thuộc tính tương ứng. Giá trị mặc định: all 0s ease 0s.

Giá trị none hủy bỏ tất cả các chuyển tiếp (chúng sẽ diễn ra ngay lập tức).

Ví dụ

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

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

#elem {
	border: 1px solid black;
	transition: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

Xem thêm

thuộc tính animation,
có thể được sử dụng để tạo hoạt ảnh