คุณสมบัติ animation

คุณสมบัติ animation เป็นคุณสมบัติ ชวเลขสำหรับภาพเคลื่อนไหว ช่วยให้กำหนด คุณสมบัติทั้งหมดสำหรับภาพเคลื่อนไหวได้พร้อมกัน: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

ลำดับของค่าไม่มีความสำคัญ เวลาดำเนินการ ของภาพเคลื่อนไหว animation-duration ต้อง อยู่ก่อนความล่าช้า animation-delay อย่างแน่นอน คุณสมบัติที่จำเป็นมีเพียง animation-name และ animation-duration เท่านั้น

คุณสมบัตินี้อาจรับค่า none ได้ด้วย ซึ่งจะปิดการทำงานของภาพเคลื่อนไหวทั้งหมด ค่า นี้เป็นค่าเริ่มต้น

ไวยากรณ์

ตัวเลือก {
	animation: ค่า;
}

ตัวอย่าง

ในตัวอย่างนี้ จะมีความล่าช้า 3 วินาทีก่อนเริ่มภาพเคลื่อนไหว (ก่อนการเล่นแต่ละครั้งใหม่) จากนั้นภาพเคลื่อนไหวจะเล่นเป็นเวลา 6 วินาที:

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ตัวอย่าง . ปัญหาที่อาจเกิดขึ้น

ภาพเคลื่อนไหวที่เขียนในรูปแบบย่ออาจ ไม่ทำงานเนื่องจากชื่อของมัน ลองดู ภาพเคลื่อนไหวต่อไปนี้:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

สังเกตว่าผมใช้ชื่อภาพเคลื่อนไหว reverse เมื่อดูครั้งแรก ทุกอย่างดูดี แต่ภาพเคลื่อนไหว ไม่ทำงาน เพราะ reverse เป็น คำหลักที่ถูกต้องสำหรับคุณสมบัติ animation-direction

ภาพเคลื่อนไหวจะไม่ทำงานเมื่อใช้ ในรูปแบบย่อหากมีคำหลักอื่น ๆ ในชื่อด้วย แต่ทุกอย่างทำงานดีเมื่อใช้ รูปแบบ "เต็ม" ในการอธิบาย

คำหลัก-ค่าของ animation-direction ที่ทำให้ภาพเคลื่อนไหวเสีย รวมถึงคำหลัก ที่เกี่ยวข้องกับฟังก์ชันปรับให้เรียบ และ infinite, alternate, running, paused และอื่น ๆ ด้วย

ดูเพิ่มเติม

คำสั่ง @keyframes,
ที่กำหนดเฟรมหลักของภาพเคลื่อนไหว
การเปลี่ยนแปลงอย่างราบรื่น transition, ซึ่งเป็นภาพเคลื่อนไหวเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ