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 متحركة، انظر البرنامج التعليمي لدينا على CSS3 متحركة .

عندما يلعب الرسوم المتحركة CSS، وهناك ثلاثة أحداث التي يمكن أن تحدث:

يحدث عندما بدأت الرسوم المتحركة CSS - animationstart
animationiteration يحدث عندما يتم تكرار الرسوم المتحركة CSS -
animationend يحدث عند اكتمال الرسوم المتحركة CSS -

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الحدث.

أرقام تليها "webkit" أو "moz" تحدد النسخة الأولى التي عملت مع بادئة.

هدف
animationstart	4.0 بكت	10.0	16.0 5.0 MOZ	4.0 بكت	15.0 بكت 12.1

ملاحظة: للحصول على كروم وسفاري وأوبرا، استخدام بادئة webkitAnimationStart.

بناء الجملة

object.addEventListener("webkitAnimationStart", myScript ); // Code for Chrome, Safari and Opera
object .addEventListener("animationstart", myScript ); // Standard syntax

ملاحظة: addEventListener() لا يتم اعتماد طريقة في Internet Explorer 8 والإصدارات السابقة.