حدث بدء الرسوم المتحركة

مثال

افعل شيئًا باستخدام عنصر <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
تحريك الرسوم المتحركة - يحدث عند تكرار الرسوم المتحركة لـ CSS
الرسوم المتحركة - يحدث عند اكتمال الرسوم المتحركة لـ 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 والإصدارات السابقة.