Thuộc tính transition-property

Thuộc tính transition-property thiết lập thuộc tính sẽ được tạo hiệu ứng bằng chuyển tiếp mượt mà transition. Giá trị cần truyền vào là tên của thuộc tính CSS sẽ được tạo hiệu ứng. Nếu đặt giá trị là all (giá trị mặc định) - tất cả các thuộc tính sẽ được tạo hiệu ứng cùng lúc.

Cú pháp

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

Ví dụ

Di chuột vào khối - nó sẽ thay đổi chiều rộng một cách mượt mà, vì transition-property có giá trị là width:

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

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

Ví dụ . Giá trị all

Trong ví dụ này, transition-property có giá trị là all - do đó tất cả các thuộc tính được viết cho trạng thái hover sẽ thay đổi mượt mà (trong trường hợp của chúng ta là width và height). Tất cả các thay đổi sẽ diễn ra trong cùng một khoảng thời gian, được thiết lập trong transition-duration:

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

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

Xem thêm

thuộc tính transition-duration,
thiết lập độ dài của chuyển tiếp mượt mà
thuộc tính transition-delay,
thiết lập độ trễ trước chuyển tiếp mượt mà
thuộc tính transition-timing-function,
thiết lập hàm thời gian cho chuyển tiếp mượt mà
thuộc tính transition,
là cách viết tắt cho chuyển tiếp mượt mà
thuộc tính animation,
dùng để tạo hoạt ảnh