ตัวอย่าง
บางสิ่งบางอย่างเคลื่อนไหวย้ายจากที่หนึ่งไปยังอีกและมีมันอยู่ที่นั่น:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการเติมภาพเคลื่อนไหวโหมดระบุลักษณะองค์ประกอบเมื่อการเคลื่อนไหวไม่ได้เล่น (when it is finished, or when it has a delay)
โดยค่าเริ่มต้นภาพเคลื่อนไหว CSS ไม่ส่งผลกระทบต่อองค์ประกอบจนคีย์เฟรมแรกคือการ "played" และจากนั้นจะหยุดเมื่อคีย์เฟรมสุดท้ายได้เสร็จสิ้น สถานที่ให้บริการเติมภาพเคลื่อนไหวโหมดสามารถแทนที่พฤติกรรมนี้
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.animationFillMode="forwards" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
CSS ไวยากรณ์
animation-fill-mode: none|forwards|backwards|both|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| none | ค่ามาตรฐาน ภาพเคลื่อนไหวจะไม่ใช้รูปแบบใด ๆ ไปยังองค์ประกอบเป้าหมายก่อนหรือหลังจากที่มีการดำเนินการ |
| forwards | หลังจากที่แอนิเมชั่ปลาย (determined by animation-iteration-count) , ภาพเคลื่อนไหวจะใช้ค่าทรัพย์สินสำหรับเวลาการเคลื่อนไหวจบ |
| backwards | ภาพเคลื่อนไหวที่จะนำไปใช้ค่าคุณสมบัติที่กำหนดไว้ในเฟรมที่จะเริ่มซ้ำแรกของการเคลื่อนไหวในช่วงระยะเวลาที่กำหนดโดยภาพเคลื่อนไหวล่าช้า เหล่านี้มีทั้งค่าจากคีย์เฟรม (when animation-direction is "normal" or "alternate") หรือของที่จะคีย์เฟรม (when animation-direction is "reverse" or "alternate-reverse") |
| both | ภาพเคลื่อนไหวที่จะปฏิบัติตามกฎระเบียบสำหรับทั้งข้างหน้าและข้างไปข้างหลัง นั่นคือมันจะขยายคุณสมบัติการเคลื่อนไหวในทั้งสองทิศทาง |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 ภาพเคลื่อนไหว
อ้างอิง HTML DOM: animationFillMode property