สไตล์แอนิเมชั่นคุณสมบัติโหมดเติม
ตัวอย่าง
การเปลี่ยนคุณสมบัติ animationFillMode ของ <div> องค์ประกอบ:
document.getElementById("myDIV").style.animationFillMode = "forwards";
ความหมายและการใช้งาน
คุณสมบัติ animationFillMode ระบุลักษณะที่จะนำไปใช้กับองค์ประกอบเมื่อไม่ได้เล่นแอนิเมชั่น (เมื่อเสร็จสิ้นหรือเมื่อมี "การหน่วงเวลา")
โดยค่าเริ่มต้น ภาพเคลื่อนไหว CSS จะไม่ส่งผลต่อองค์ประกอบที่คุณกำลังสร้างภาพเคลื่อนไหวจนกว่าจะ "เล่น" คีย์เฟรมแรก จากนั้นจะหยุดส่งผลกระทบเมื่อคีย์เฟรมสุดท้ายเสร็จสิ้น คุณสมบัติ animationFillMode สามารถแทนที่ลักษณะการทำงานนี้ได้
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย Moz ระบุเวอร์ชันแรกที่ใช้งานได้กับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
ไวยากรณ์
ส่งคืนคุณสมบัติ animationFillMode:
object.style.animationFillMode
ตั้งค่าคุณสมบัติ animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | ไม่มี |
---|---|
คืนมูลค่า: | สตริงที่แสดงถึงคุณสมบัติโหมดเติมแอนิเมชั่นขององค์ประกอบ |
เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติโหมดเติมแอนิเมชั่น