คุณสมบัติ Style animation
- หน้าก่อนหน้า alignSelf
- หน้าต่อไป animationDelay
- กลับไปยังหน้าสูงสุด ตัวแปร HTML DOM Style
การระบุและใช้งาน
การสนับสนุนบราวเซอร์
คุณสมบัติเป็นคุณสมบัติสั้นแบบของหกคุณสมบัติการเคลื่อนไหว:
- animationName
- animationDuration
- animationTimingFunction
- animationDelay
- กำหนดช่วงเวลาหลังจากที่อนุญาตให้การแอนิเมชันเริ่มต้น
- กำหนดว่าการแอนิเมชันจะเล่นเท่าไรครั้ง
หมายเหตุ:ให้กำหนดเสมอ คุณสมบัติ animationDurationหากไม่กำหนด จะมีระยะเวลา 0 และจะไม่เล่นตามไปเลย。
ตัวอย่าง
ใช้คุณสมบัติสั้นแบบเพื่อเปลี่ยนแปลงเครื่องมือเรียกใช้การเคลื่อนไหวของ <div> ได้:
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
รูปแบบการใช้งาน
กลับค่าคุณสมบัติ animation:
object.style.animation
ตั้งคุณสมบัติ animation:
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
ค่าทางสมบัติ
ค่า | คำอธิบาย |
---|---|
animationName | กำหนดชื่อฟิล์มเคย์โฟร์มที่จะจับออกมาเพื่อโซนซับจังหวะ |
animationDuration | กำหนดเวลาที่จะใช้ในการแอนิเมชัน |
animationTimingFunction | กำหนดความเร็วของการแอนิเมชัน |
animationDelay | animationDelay |
กำหนดช่วงเวลาหลังจากที่อนุญาตให้การแอนิเมชันเริ่มต้น | animationIterationCount |
กำหนดว่าการแอนิเมชันจะเล่นเท่าไรครั้ง | animationDirection |
กำหนดว่าการแอนิเมชันจะเล่นซ้ำหรือไม่ในระบบวนโครง | animationFillMode |
กำหนดค่าที่นอกเหนือจากเวลาที่กำหนดในการปฏิบัติการ | animationPlayState |
ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู | กำหนดว่าอนุญาตให้การแอนิเมชันทำงานหรือหยุด ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดูสตริง ที่แสดงความหมายขององค์ประกอบขององค์ประกอบ |
จากองค์ประกอบพ่อของตน ขอใช้การเพื่อคุณสมบัตินี้ โปรดดู | initial จากองค์ประกอบพ่อของตน ขอใช้การเพื่อคุณสมบัตินี้ โปรดดูสตริง ที่แสดงความหมายขององค์ประกอบขององค์ประกอบ |
inherit
รายละเอียดเทคนิค | ค่าเริ่มต้น: |
---|---|
none 0 ease 0 1 normal none running | ค่าที่กลับมา: ข้อมูล CSS ทั้งหมดสตริง ที่แสดงความหมายขององค์ประกอบขององค์ประกอบ |
。 | เอกสาร CSS: |
CSS3
การสนับสนุนบราวเซอร์
animation
เป็นคุณสมบัติ CSS3 (1999) ของ CSS3。
ทุกบราวเซอร์สนับสนุนอย่างเต็มที่: | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
ทุกบราวเซอร์สนับสนุนอย่างเต็มที่: | Chrome | Edge | Firefox | Safari | Opera |
IE | IE | IE | IE | IE | สนับสนุน |
11
หน้าที่เกี่ยวข้องข้อมูล CSS ทั้งหมด
- หน้าก่อนหน้า alignSelf
- หน้าต่อไป animationDelay
- กลับไปยังหน้าสูงสุด ตัวแปร HTML DOM Style