คุณสมบัติ animation-play-state

คุณสมบัติ animation-play-state ช่วยให้ กำหนดสถานะของการเคลื่อนไหวได้: มันกำลังเล่น หรือหยุดชั่วคราว

ไวยากรณ์

selector {
	animation-play-state: paused | running;
}

ค่า

ค่า	คำอธิบาย
`paused`	การเคลื่อนไหวหยุดชั่วคราว
`running`	การเคลื่อนไหวกำลังเล่น

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

ตัวอย่าง

ในตัวอย่างนี้ การเคลื่อนไหวจะเริ่มต้น เมื่อนำเมาส์ไปวางเหนือองค์ประกอบ และจะหยุด เมื่อเลื่อนเมาส์ออกจากองค์ประกอบ:

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

@keyframes move {
	from {
		width: 200px;
	}
	to {
		width: 400px;
	}
}

#elem {
	animation-play-state: paused;
	animation-duration: 1s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	height: 50px;
}
#elem:hover {
	animation-play-state: running;
}

ตัวอย่าง . การนำเมาส์ไปวางเหนือองค์ประกอบอื่น

ตอนนี้ การเคลื่อนไหวจะเริ่มต้นโดยการนำเมาส์ไปวาง เหนือองค์ประกอบอื่น และเมื่อเลื่อนเมาส์ออก จากองค์ประกอบนั้น - จะหยุด:

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

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

#target {
	border: 1px solid red;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
}

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

#target:hover + #elem {
	animation-play-state: running;
	border: 1px solid green;
}

ดูเพิ่มเติม

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