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

คุณสมบัติ animation-delay กำหนด การหน่วงเวลาก่อนเริ่มแอนิเมชัน

ไวยากรณ์

ตัวเลือก {
	animation-delay: เวลาใน s หรือ ms;
}

ค่า

ค่า	คำอธิบาย
`s`	ระบุเวลาเป็นวินาที (ตัวอย่างเช่น `3s`)
`ms`	ระบุเวลาเป็นมิลลิวินาที (ตัวอย่างเช่น `3ms`) หนึ่งวินาทีเท่ากับ `1000` มิลลิวินาที

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

ตัวอย่าง

ในตัวอย่างนี้ จะมีการหน่วงเวลา 3 วินาทีก่อนเริ่มแอนิเมชัน:

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-delay: 3s;
	animation-duration: 6s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ดูเพิ่มเติม

คุณสมบัติ animation-name,
ซึ่งกำหนดชื่อแอนิเมชัน
คุณสมบัติ animation-duration,
ซึ่งกำหนดระยะเวลาแอนิเมชัน
คุณสมบัติ animation-timing-function,
ซึ่งกำหนดความเร็วในการดำเนินแอนิเมชัน
คุณสมบัติ animation-iteration-count,
ซึ่งกำหนดจำนวนรอบการทำงานของแอนิเมชัน
คุณสมบัติ animation-direction,
ซึ่งกำหนดทิศทางของแอนิเมชัน
คุณสมบัติ animation-fill-mode,
ซึ่งกำหนดสถานะของแอนิเมชัน
คุณสมบัติ animation-play-state,
ซึ่งช่วยให้หยุดแอนิเมชันชั่วคราวได้
คุณสมบัติ animation,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับแอนิเมชัน
คำสั่ง @keyframes,
ซึ่งกำหนดเฟรมหลักของแอนิเมชัน
การเปลี่ยนผ่านอย่างราบรื่น transition, ซึ่งเป็นแอนิเมชันเมื่อวางเมาส์เหนือองค์ประกอบ