HTML DOM AnimationEvent เป็นวัตถุใน JavaScript ที่จัดการเหตุการณ์ที่เกิดขึ้นเมื่อรันแอนิเมชั่น CSS โดยพื้นฐานแล้วจะให้ข้อมูลเกี่ยวกับเหตุการณ์ที่เกี่ยวข้องกับแอนิเมชั่น ทำให้เราสามารถควบคุมภาพเคลื่อนไหว CSS ได้ดียิ่งขึ้น แสดงถึงความสัมพันธ์ระหว่างเหตุการณ์และแอนิเมชันโดยอธิบายว่าเหตุการณ์ใดทำให้เกิดแอนิเมชั่น
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของกิจกรรมแอนิเมชั่น -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ชื่อแอนิเมชั่น | จะส่งคืนชื่อของแอนิเมชั่นที่กำลังดำเนินการ |
| เวลาที่ผ่านไป | ส่งกลับเวลาที่ผ่านไปตั้งแต่แอนิเมชั่นทำงานเป็นวินาที |
| pseudoElement | ส่งกลับชื่อขององค์ประกอบหลอกของแอนิเมชัน เช่น ::before, ::after, ::first-line เป็นต้น |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ของ animationEvent −
animationEvent.property
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับ animationEvent −
หมายเหตุ − สิ่งนี้ได้รับการทดสอบบน chrome 74.0.3729.169 ตรวจสอบความเข้ากันได้ของเบราว์เซอร์สำหรับ animationEvent
ผลลัพธ์
มันจะสร้างผลลัพธ์ต่อไปนี้ -
หลังจาก 5 วินาที องค์ประกอบจะเลื่อนลงด้านล่าง -
ในตัวอย่างข้างต้น −
เราได้สร้างกล่องสี่เหลี่ยมขนาด 400px X 100px โดยใช้ div
<ก่อนหน้า>#ANIM-DIV { ขอบ:10px; ความกว้าง:400px; ความสูง:100px; พื้นหลัง:สีเขียวอ่อน; ตำแหน่ง:ญาติ; ขนาดตัวอักษร:30px; ชื่อแอนิเมชั่น:animMove; ภาพเคลื่อนไหว-duration:5s;}จากนั้นเราได้ระบุตำแหน่งเริ่มต้นและสิ้นสุดระหว่างที่ div จะย้ายไปเคลื่อนไหว -
@-webkit-keyframes animMove { from {top:0px;} to {top:200px;}} 