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