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

คุณสมบัติ animation-duration กำหนด ระยะเวลาการทำงานของอนิเมชัน

โครงสร้าง

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

ค่า

ค่า	คำอธิบาย
`s`	กำหนดเวลาในหน่วยวินาที (เช่น `3s`)
`ms`	กำหนดเวลาในหน่วยมิลลิวินาที (เช่น `3ms`) หนึ่งวินาที เท่ากับ `1000` มิลลิวินาที

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

ตัวอย่าง

ในตัวอย่างนี้ อนิเมชันจะเล่นเป็นเวลา 3 วินาที:

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

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

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

ดูเพิ่มเติม

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