คุณสมบัติ animation-iteration-count

คุณสมบัติ animation-iteration-count กำหนดจำนวนครั้งที่แอนิเมชันทำงานซ้ำ โดยค่าเริ่มต้น แอนิเมชันจะทำงานซ้ำเพียง 1 ครั้งและ จากนั้นจะกลับสู่สถานะเดิม คุณสมบัตินี้ของเราช่วยให้กำหนด จำนวนครั้งที่แน่นอน หรือแม้กระทั่ง กำหนดให้ทำงานซ้ำอย่างไม่สิ้นสุด

ไวยากรณ์

selector {
	animation-iteration-count: integer or decimal | infinite;
}

ค่าที่กำหนดได้

ค่า คำอธิบาย

ตัวเลข จำนวนครั้งที่กำหนดไว้ หลังจากดำเนินการครบแล้วแอนิเมชันจะหยุด ตำแหน่งที่มันจะอยู่ ถูกควบคุมโดย คุณสมบัติ animation-fill-mode สามารถกำหนดค่าทศนิยมได้ - ในกรณีนี้แอนิเมชันจะเล่น เพียงบางส่วน

infinite แอนิเมชันจะทำงานซ้ำอย่างไม่สิ้นสุด

ค่า	คำอธิบาย
ตัวเลข	จำนวนครั้งที่กำหนดไว้ หลังจากดำเนินการครบแล้วแอนิเมชันจะหยุด ตำแหน่งที่มันจะอยู่ ถูกควบคุมโดย คุณสมบัติ `animation-fill-mode` สามารถกำหนดค่าทศนิยมได้ - ในกรณีนี้แอนิเมชันจะเล่น เพียงบางส่วน
`infinite`	แอนิเมชันจะทำงานซ้ำอย่างไม่สิ้นสุด

ค่าเริ่มต้น: 1

ตัวอย่าง . จำนวนครั้งที่สิ้นสุด

ในตัวอย่างนี้ แอนิเมชันจะทำงานซ้ำเพียง 3 ครั้ง และจากนั้นจะกลับสู่สถานะเดิม:

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

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

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

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

และตอนนี้แอนิเมชันจะทำงานซ้ำอย่างไม่สิ้นสุด:

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