ตัวอย่าง
ทำอะไรบางอย่างกับ <div> องค์ประกอบเมื่อภาพเคลื่อนไหว CSS ซ้ำ:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
//
Standard syntax
x.addEventListener("animationiteration",
myRepeatFunction); ลองตัวเอง» ความหมายและการใช้งาน
เหตุการณ์ที่เกิดขึ้นเมื่อ animationiteration ภาพเคลื่อนไหว CSS ซ้ำแล้วซ้ำอีก
ถ้าแบบ CSS animationiteration นับ ตั้งค่าคุณสมบัติเป็น "1" หมายความว่าการเคลื่อนไหวจะถูกเล่นครั้งหนึ่งเหตุการณ์ animationiteration ไม่ได้เกิดขึ้น ภาพเคลื่อนไหวต้องใช้มากกว่าหนึ่งครั้งสำหรับเหตุการณ์นี้จะยิง
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอนิเมชั่ CSS ดูกวดวิชาของเราใน CSS3 ภาพเคลื่อนไหว
เมื่อมีการเคลื่อนไหว CSS เล่นมีสามเหตุการณ์ที่อาจเกิดขึ้น:
- animationstart - เกิดขึ้นเมื่อ CSS นิเมชั่นได้เริ่มต้น
- animationiteration - เกิดขึ้นเมื่อ CSS เคลื่อนไหวซ้ำแล้วซ้ำอีก
- animationend - เกิดขึ้นเมื่อแอนิเมชั่ CSS ได้เสร็จสิ้น
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่เหตุการณ์
เบอร์ตามมาด้วย "webkit" หรือ "moz" ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| เหตุการณ์ | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 WebKit | 10.0 | 16.0 5.0 moz | 4.0 WebKit | 15.0 WebKit 12.1 |
หมายเหตุ: สำหรับ Chrome, Safari และ Opera ใช้คำนำหน้า webkitAnimationIteration
วากยสัมพันธ์
object.addEventListener("webkitAnimationIteration", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationiteration", myScript );
// Standard syntax
หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้านี้
รายละเอียดทางเทคนิค
| บับเบิ้ล: | ใช่ |
|---|---|
| ยกเลิก: | ไม่ |
| ประเภทเหตุการณ์: | AnimationEvent |
| DOM เวอร์ชัน: | ระดับที่ 3 เหตุการณ์ |
หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS3 ภาพเคลื่อนไหว
CSS อ้างอิง: CSS3 animation Property
CSS อ้างอิง: CSS3 animation-iteration-count Property
HTML DOM อ้างอิง: Style animation Property
<object เหตุการณ์