ตัวแปร animation-fill-mode ใน CSS

คำนำและการใช้งาน

animation-fill-mode คุณสมบัตินี้กำหนดว่าในระหว่างแอนิเมชันเล่นหรือหลังจากแอนิเมชันเล่น สิ่งที่แสดงในแอนิเมชันมีที่เห็นหรือไม่

หมายเหตุ:ค่าที่มีอยู่ของคุณสมบัติเป็นคำหมายแบบการทำงานที่แยกด้วยเครื่องหมายกำบัง

คู่มือเอชทีเอ็มแอลล์ DOManimationFillMode คุณสมบัติ

กำหนดโซนที่เติมสำหรับองค์ประกอบ h1

h1
  {
  animation-fill-mode: forwards;
  }

animation-fill-mode : none | forwards | backwards | both;

ค่า	รายละเอียด
none	ไม่เปลี่ยนแปลงพฤติกรรมเริ่มต้น
forwards	หลังจากแอนิเมชันเสร็จ ใช้ค่าที่กำหนดในฟรีมสุดท้าย
backwards	ในช่วงเวลาที่กำหนดโดย animation-delay ในระหว่างที่แอนิเมชันแสดง ใช้ค่าเริ่มต้นที่กำหนดในฟรีมส์แรก
both	โซนที่เติมข้างหน้าและข้างหลังทั้งหมดถูกนำไปประยุกต์

ค่าเริ่มต้น:	none
เชื่อมโยงเรียนรู้:	no
เวอร์ชั่น:	CSS3
JavaScript การเขียน	object.style.animationFillMode=none

ตัวเลขในตารางบอกเล่าเวอร์ชั่นแรกของเบราเซอร์ที่สนับสนุนคุณสมบัติดังกล่าว

ประกาย -webkit-、-moz- หรือ -o- ด้วยตัวเลขหมายถึงเวอร์ชั่นเริ่มต้นที่ใช้รูปแบบเด่น

Chrome	Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.1 12.0 -o-