เหตุการณ์ animationstart

เหตุการณ์ DOM AnimationEvent

คำอธิบายและการใช้งาน

เหตุการณ์ animationstart จะเกิดขึ้นเมื่อ CSS อนุกรมวิธีเริ่มเล่น

หากต้องการความรู้เพิ่มเติมเกี่ยวกับ CSS อนุกรมวิธี โปรดเรียน ตัวเรียน CSS3 อนุกรมวิธี。

เมื่อ CSS อนุกรมวิธีเล่นตัวอย่างนี้ จะมีเหตุการณ์สามที่อาจเกิดขึ้น:

  • animationstart - เกิดขึ้นเมื่อ CSS อนุกรมวิธีเริ่มต้น
  • animationiteration - เกิดขึ้นเมื่อ CSS อนุกรมวิธีทำงานรอบ
  • animationend - เกิดขึ้นเมื่อ CSS อนุกรมวิธีเสร็จสิ้น

ตัวอย่าง

เมื่อ CSS อนุกรมวิธีเริ่มต้น ทำบางอย่างกับส่วน <div> ของคุณ:

var x = document.getElementById("myDIV");
// รหัสสำหรับ Chrome、Safari และ Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// กฎกติ์ทางมาตรฐาน
x.addEventListener("animationstart", myStartFunction);

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

กฎกติ์

object.addEventListener("webkitAnimationStart", myScript);  // รหัสสำหรับ Chrome、Safari และ Opera
object.addEventListener("animationstart", myScript);        // กฎกติ์ทางมาตรฐาน

หมายเหตุ：Internet Explorer 8 หรือตัวเวอร์ชั่นเก่ากว่านี้ไม่สนับสนุน วิธีการ addEventListener()。

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

การกระจายเหตุการณ์ทั้งหมด สนับสนุน
ยกเลิกได้： ไม่สนับสนุน
ประเภทเหตุการณ์： AnimationEvent
DOM รุ่น： Level 3 Events

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

ตัวเลขในตารางชี้ถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนเหตุการณ์นี้อย่างเต็มที่

ตัวเลขหลัง "webkit" หรือ "moz" ชี้ถึงเวอร์ชั่นหลักที่ใช้เป็นหน้าตัวแรกของหน้าแฟรม์

เหตุการณ์ Chrome IE Firefox Safari Opera
animationstart 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

หมายเหตุ：สำหรับ Chrome、Safari และ Opera ใช้ webkitAnimationEnd。

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

CSS ตัวเรียน：CSS3 อนุกรม

CSS อ้างอิงคู่มือ：CSS3 animation รายละเอียด

คู่มือ HTML DOM สำหรับฉบับภาษาไทยanimation รายละเอียด

เหตุการณ์ DOM AnimationEvent