คุณสมบัติ transition-property

คุณสมบัติ transition-property กำหนด คุณสมบัติที่จะถูกทำให้เคลื่อนไหวอย่างลื่นไหล ด้วยการเปลี่ยนผ่าน transition ค่าที่ควรส่ง คือชื่อคุณสมบัติ CSS ที่จะถูกทำให้เคลื่อนไหว หากกำหนดค่าเป็น all (ซึ่งเป็นค่าที่ตั้งไว้โดยค่าเริ่มต้น) - ทุกคุณสมบัติ จะถูกทำให้เคลื่อนไหวพร้อมกัน

ไวยากรณ์

ตัวเลือก {
	transition-property: ค่า;
}

ตัวอย่าง

เลื่อนเมาส์มาบนบล็อก - มันจะเปลี่ยน ความกว้างของมันอย่างลื่นไหล เนื่องจาก transition-property มีค่าเป็น width:

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

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

ตัวอย่าง . ค่า all

ในตัวอย่างนี้ transition-property มีค่าเป็น all - ดังนั้นคุณสมบัติทั้งหมด ที่เขียนไว้สำหรับสถานะ hover จะเปลี่ยน อย่างลื่นไหล (ในกรณีของเรา นี่คือ width และ height) การเปลี่ยนแปลงทั้งหมด จะเกิดขึ้นภายในเวลาเดียวกัน ซึ่งกำหนดไว้ ใน 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;
}

ดูเพิ่มเติม

คุณสมบัติ transition-duration,
ซึ่งกำหนดระยะเวลาของการเปลี่ยนผ่านอย่างลื่นไหล
คุณสมบัติ transition-delay,
ซึ่งกำหนดความล่าช้าก่อนการเปลี่ยนผ่านอย่างลื่นไหล
คุณสมบัติ transition-timing-function,
ซึ่งกำหนดฟังก์ชันเวลาสำหรับการเปลี่ยนผ่านอย่างลื่นไหล
คุณสมบัติ transition,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับการเปลี่ยนผ่านอย่างลื่นไหล
คุณสมบัติ animation,
ซึ่งใช้สร้างแอนิเมชันได้