คุณสมบัติ transition

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

ไวยากรณ์

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

ลำดับของคุณสมบัติไม่มีผล อย่างไรก็ตาม เวลาดำเนินการ (transition-duration) ต้องอยู่ก่อนเวลาล่าช้า (transition-delay)

ค่า

ดูคุณสมบัติที่เกี่ยวข้อง ค่าเริ่มต้น: all 0s ease 0s

ค่า none จะยกเลิกการเปลี่ยนแปลงทั้งหมด (การเปลี่ยนแปลงจะเกิดขึ้นทันที)

ตัวอย่าง

วางเมาส์บนบล็อก - จะไม่มีอะไรเกิดขึ้นเป็นเวลา 3 วินาที (มีการตั้งค่าล่าช้า 3s) จากนั้นความกว้างของมันจะเปลี่ยนแปลง อย่างลื่นไหลในเวลา 2 วินาที หากเลื่อนเมาส์ออก - อีกครั้ง จะไม่มีอะไรเกิดขึ้นเป็นเวลา 3 วินาที จากนั้นความกว้างจะลดลงอย่างลื่นไหล สู่ค่าเดิม:

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

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

ดูเพิ่มเติม

คุณสมบัติ animation,
ซึ่งสามารถใช้สร้างภาพเคลื่อนไหวได้