คุณสมบัติ animationFillMode ใช้เพื่อระบุวิธีการใช้สไตล์นอกเวลาดำเนินการ เช่น หลังจากเสร็จสิ้นหรือหากมีการระบุการหน่วงเวลาไว้ ซึ่งจะเป็นประโยชน์ในการตั้งค่ารูปแบบแอนิเมชั่น css ให้กับองค์ประกอบก่อนเริ่มแอนิเมชั่นและหลังจากสิ้นสุด
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ animationFillMode -
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
คุณค่า
ต่อไปนี้เป็นค่า -
| ค่า | คำอธิบาย |
|---|---|
| ไม่มี | สิ่งนี้ทำให้แอนิเมชั่นจะไม่นำสไตล์ใดๆ ไปใช้กับองค์ประกอบเป้าหมายก่อนเริ่มหรือหลังจากที่แอนิเมชั่นจบลง ซึ่งเป็นค่าเริ่มต้น |
| ไปข้างหน้า | ใช้รูปแบบคีย์เฟรมสุดท้ายกับองค์ประกอบเป้าหมายหลังจากที่ภาพเคลื่อนไหวสิ้นสุดลง |
| ถอยหลัง | ใช้รูปแบบคีย์เฟรมแรกกับองค์ประกอบเป้าหมายหลังจากที่ภาพเคลื่อนไหวสิ้นสุดลง |
| ทั้งสองอย่าง | ใช้กฎการเดินหน้าและถอยหลังกับภาพเคลื่อนไหว |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ animationFillMode -
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 30px;
width: 30px;
background-color: orange;
animation: small 4s;
animation-fill-mode: forwards;
}
@keyframes small {
0% {
width: 200px;
height: 200px;
background-color: white;
}
33% {
background-color: green;
}
66% {
background-color: violet;
}
100% {
background-color: darkred;
}
}
</style>
<script>
function changeFillMode(){
document.getElementById("DIV1").style.animationFillMode="backwards";
document.getElementById("Sample").innerHTML="The animation fillmode is now backwards";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to change the above animation fillmode property</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อภาพเคลื่อนไหวสิ้นสุดลง สีสี่เหลี่ยมจัตุรัสจะเป็นสีแดงเข้มเนื่องจากเป็นคีย์เฟรมสุดท้าย -
เมื่อคลิกที่ CHANGE FILL สีจะเปลี่ยนเป็นสีส้มซึ่งเป็นคีย์เฟรมแรกของเรา -
หมายเหตุ − คุณสมบัตินี้ไม่รองรับในเบราว์เซอร์ IE/EDGE และ Safari
