ตัวอย่าง
เปลี่ยน animationFillMode ทรัพย์สินของ <div> องค์ประกอบ:
document.getElementById("myDIV").style.animationFillMode = "forwards";
ลองตัวเอง» ความหมายและการใช้งาน
คุณสมบัติ animationFillMode ระบุสิ่งที่รูปแบบจะใช้สำหรับองค์ประกอบเมื่อภาพเคลื่อนไหวไม่ได้เล่น (when it is finished, or when it has a "delay")
โดยค่าเริ่มต้นภาพเคลื่อนไหว CSS จะไม่ส่งผลกระทบต่อองค์ประกอบที่คุณกำลังเคลื่อนไหวจนกระทั่งคีย์เฟรมแรกคือการ "played" และจากนั้นจะหยุดมันมีผลต่อเมื่อคีย์เฟรมสุดท้ายได้เสร็จสิ้น คุณสมบัติ animationFillMode สามารถแทนที่ลักษณะการทำงานนี้
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข Moz ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | ได้รับการสนับสนุน | 16.0 5.0 Moz | ได้รับการสนับสนุน | 30.0 |
วากยสัมพันธ์
คืนทรัพย์สิน animationFillMode นี้:
object .style.animationFillMode ตั้งค่าคุณสมบัติ animationFillMode นี้:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| none | ค่ามาตรฐาน ภาพเคลื่อนไหวจะไม่ใช้รูปแบบใด ๆ ไปยังเป้าหมายก่อนหรือหลังจากที่มีการดำเนินการ |
| forwards | หลังจากที่แอนิเมชั่ปลาย (determined by animation-iteration-count) , ภาพเคลื่อนไหวจะใช้ค่าทรัพย์สินสำหรับเวลาการเคลื่อนไหวจบ |
| backwards | ภาพเคลื่อนไหวที่จะนำไปใช้ค่าคุณสมบัติที่กำหนดไว้ในเฟรมที่จะเริ่มซ้ำแรกของการเคลื่อนไหวในช่วงระยะเวลาที่กำหนดโดยการเคลื่อนไหวล่าช้า เหล่านี้มีทั้งค่าจากคีย์เฟรม (when animation-direction is "normal" or "alternate") หรือของที่จะคีย์เฟรม (when animationDirection is "reverse" or "alternate-reverse") |
| both | ภาพเคลื่อนไหวที่จะปฏิบัติตามกฎของทั้งสองไปข้างหน้าและข้างหลัง นั่นคือมันจะขยายคุณสมบัติการเคลื่อนไหวในทั้งสองทิศทาง |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | ไม่มี |
|---|---|
| กลับค่า: | สตริงที่เป็นตัวแทนของแอนิเมชั่เติมโหมดทรัพย์สินขององค์ประกอบ |
| CSS รุ่น | CSS3 |
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: animation-fill-mode property
<สไตล์วัตถุ