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

คุณสมบัติ transition-delay กำหนด การหน่วงเวลาก่อนเริ่มการเปลี่ยนแปลงแบบ gradual transition.

ไวยากรณ์

selector {
	transition-delay: เวลาใน s หรือ ms;
}

ค่า

ค่า	คำอธิบาย
`s`	ระบุเวลาในหน่วยวินาที (ตัวอย่างเช่น `3s`) สามารถระบุค่าเศษส่วนได้ ตัวอย่างเช่น, `0.5s` - ครึ่งวินาที
`ms`	ระบุเวลาในหน่วยมิลลิวินาที (ตัวอย่างเช่น `3ms`) หนึ่งวินาที เท่ากับ `1000` มิลลิวินาที

ค่าเริ่มต้น: 0s

ตัวอย่าง

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

<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;
}

ตัวอย่าง

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

<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;
}

ดูเพิ่มเติม

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