คุณสมบัติ animation-fill-mode

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

ไวยากรณ์

ตัวเลือก {
	animation-fill-mode: backwards | forwards | both | none;
}

ค่า

ค่า	คำอธิบาย
`none`	หากมีการกำหนดความล่าช้าของแอนิเมชัน - ในช่วงเวลาล่าช้า องค์ประกอบจะยังคงอยู่ที่ตำแหน่งเดิม จากนั้นจะกระโดดไปยังเฟรม `0%` หลังจากแอนิเมชันสิ้นสุด องค์ประกอบจะไม่คงอยู่ที่สถานะนั้น ที่หยุด แต่จะกระโดดกลับไปยังสถานะเริ่มต้น
`backwards`	บังคับให้องค์ประกอบเคลื่อนที่หลังจากโหลดหน้าเว็บไปยังเฟรม `0%` แม้ว่าจะมีการกำหนดความล่าช้า `animation-delay` และคงอยู่ที่นั่น จนกว่าแอนิเมชันจะเริ่มต้น หลังจากแอนิเมชันสิ้นสุด องค์ประกอบ จะไม่คงอยู่ที่สถานะที่หยุด แต่จะกระโดดกลับไปยังสถานะเริ่มต้น
`forwards`	ระบุให้เบราว์เซอร์ว่าหลังจากแอนิเมชันสิ้นสุด องค์ประกอบ จะคงอยู่ที่สถานะที่หยุด
`both`	รวม backwards และ forwards - หลังจากโหลด หน้าเว็บ องค์ประกอบจะตั้งค่าไปยังเฟรม `0%` และหลังจาก แอนิเมชันสิ้นสุด องค์ประกอบจะคงอยู่ที่ตำแหน่งที่หยุด

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

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

ในตัวอย่างนี้ margin-left ถูกตั้งค่าเป็น 300px สำหรับองค์ประกอบ และสำหรับเฟรมแรกของแอนิเมชัน - เป็น 0px เนื่องจากไม่มีความล่าช้า animation-delay องค์ประกอบหลังโหลดหน้าเว็บจะอยู่ ที่ 0px ไม่ใช่ที่ 300px นอกจาก นั้น หลังจากแอนิเมชันสิ้นสุดจะกระโดด กลับไปยังค่าเริ่มต้น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

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

ในตัวอย่างนี้ margin-left ถูกตั้งค่าเป็น 300px สำหรับองค์ประกอบ และสำหรับเฟรมแรกของแอนิเมชัน - เป็น 0px นอกจากนี้สำหรับองค์ประกอบยังกำหนดความล่าช้า animation-delay เป็น 3 วินาที ดังนั้นองค์ประกอบหลังจาก โหลดหน้าเว็บจะอยู่ที่ 300px ไม่ใช่ที่ 0px และจะอยู่ที่นั่นเป็นเวลา 3 วินาที หลังจากนั้นจะกระโดด ไปยัง 0px - และแอนิเมชันจะเริ่มจากที่นั่น นอกจากนั้น หลังจากแอนิเมชันสิ้นสุดจะ กระโดดกลับไปยังค่าเริ่มต้น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

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

ในตัวอย่างนี้ margin-left ถูกตั้งค่าเป็น 300px สำหรับองค์ประกอบ และสำหรับเฟรมแรกของแอนิเมชัน - เป็น 0px นอกจากนี้สำหรับองค์ประกอบยังตั้งค่า animation-fill-mode เป็นค่า backwards ดังนั้นองค์ประกอบ หลังจากโหลดหน้าเว็บจะอยู่ที่ 0px ไม่ใช่ที่ 300px เหมือนกับ animation-fill-mode ในค่า none นอกจากนั้น หลังจากแอนิเมชัน สิ้นสุดจะกระโดดกลับไปยังค่าเริ่มต้น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ตัวอย่าง . ค่า none และจำนวนการทำซ้ำเท่ากับ 1

ในตัวอย่างนี้ margin-left ถูกตั้งค่าเป็น 300px สำหรับองค์ประกอบ และสำหรับเฟรมแรกของแอนิเมชัน - เป็น 0px นอกจากนี้สำหรับองค์ประกอบยังกำหนดความล่าช้า animation-delay เป็น 3 วินาที ดังนั้นองค์ประกอบหลังจาก โหลดหน้าเว็บจะอยู่ที่ 300px ไม่ใช่ที่ 0px และจะอยู่ที่นั่นเป็นเวลา 3 วินาที หลังจากนั้นจะกระโดด ไปยัง 0px - และแอนิเมชันจะเริ่มจากที่นั่น เนื่องจาก animation-fill-mode ถูกตั้งค่า เป็นค่า none ดังนั้นหลังจากเล่นแอนิเมชันเสร็จ องค์ประกอบจะกลับไปยังค่าเริ่มต้น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ตัวอย่าง . ค่า forwards และจำนวนการทำซ้ำเท่ากับ 1

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

นอกจากนี้ margin-left ถูกตั้งค่า เป็น 300px สำหรับองค์ประกอบ และสำหรับ เฟรมแรกของแอนิเมชัน - เป็น 0px นอกจากนี้ สำหรับองค์ประกอบยังกำหนดความล่าช้า animation-delay เป็น 3 วินาที ดังนั้นองค์ประกอบหลังจาก โหลดหน้าเว็บจะอยู่ที่ 300px ไม่ใช่ที่ 0px และจะอยู่ที่นั่นเป็นเวลา 3 วินาที หลังจากนั้นจะกระโดด ไปยัง 0px - และแอนิเมชันจะเริ่มจากที่นั่น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ตัวอย่าง . ค่า both และจำนวนการทำซ้ำเท่ากับ 1

ในตัวอย่างนี้ animation-fill-mode ถูกตั้งค่าเป็น both และ จำนวน การทำซ้ำของแอนิเมชัน - เป็น 1 หลังจาก โหลดหน้าเว็บ องค์ประกอบจะอยู่ที่ เฟรมแรกของแอนิเมชัน (ที่ 0px ไม่ใช่ ที่ 300px) และหลังจากเล่นแอนิเมชันเสร็จ องค์ประกอบ จะคงอยู่ที่ตำแหน่งที่แอนิเมชันสิ้นสุด ไม่กระโดดกลับไปยังจุดเริ่มต้น:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

ดูเพิ่มเติม

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