คุณสมบัติ Style animationFillMode

การใช้งานและการประกาศ

animationFillMode คุณสมบัตินี้กำหนดสไตล์ที่จะถูกใช้บนองค์ประกอบเมื่อการ์ตูนไม่เล่น (หลังจากการ์ตูนจบลง หรือเมื่อมี "ละดช่วงเวลา")

โดยมาตราฐาน การ์ตูน CSS จะไม่ส่งผลกับองค์ประกอบที่กำลังตอบสนองการ์ตูนก่อนจะเริ่มวางการ์ตูนแรก และจะหยุดส่งผลหลังจากวางการ์ตูนสุดท้ายanimationFillMode คุณสมบัติสามารถนำหลังจากนี้มาเพิ่มเติมพฤติกรรมนี้

ตัวอย่าง

แก้ไขคุณสมบัติ animationFillMode ของ <div> องค์ประกอบ：

document.getElementById("myDIV").style.animationFillMode = "forwards";

ลองด้วยตัวเอง

ศัพท์

ส่งกลับคุณสมบัติ animationFillMode：

object.style.animationFillMode

ตั้งคุณสมบัติ animationFillMode：

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

ค่าที่ใช้ในคุณสมบัติ

ค่า คำอธิบาย
none ค่าเริ่มต้น
forwards หลังจากการ์ตูนจบลง (ที่กำหนดโดย animation-iteration-count) การ์ตูนจะใช้ค่าที่กำหนดในการจบการ์ตูน
backwards

ในช่วงเวลาที่กำหนดโดย animation-delay การ์ตูนจะใช้ค่าที่กำหนดในโครงสร้างสำคัญ ที่จะเริ่มการวางการ์ตูนในการวางครั้งแรก

เหล่านี้มาจากค่าที่อยู่ในความเป็นมาของโครงสร้างสำคัญ (เมื่อทิศทางการ์ตูนเป็น "normal" หรือ "alternate") หรือค่าที่ไปที่โครงสร้างสำคัญ (เมื่อทิศทางการ์ตูนเป็น "reverse" หรือ "alternate-reverse")
both การ์ตูนจะปฏิบัติตามกฎของการขยายเข้าและออกไป
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น initial。
inherit จากองค์ประกอบพ่อของมัน ให้มีคุณสมบัตินี้ inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น none
ค่าที่ส่งกลับมา ข้อความแบบสตริง，ที่แสดงคุณสมบัติขององค์ประกอบ animation-fill-mode 属性。
เวอร์ชั่น CSS： CSS3

การสนับสนุนของเบราเซอร์

animationFillMode เป็นคุณสมบัติ CSS3 (1999) คือ。

ทั้งหมดเบราเซอร์ทุกตัวสนับสนุนมันทั้งหมด：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน 11

หน้าที่เกี่ยวข้อง

CSS อ้างอิงคู่มือ：animation-fill-mode 属性