حدث animationiteration

مثال

تفعل شيئا مع <div> العنصر عندما يتم تكرار الرسوم المتحركة CSS:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

انها محاولة لنفسك »

تعريف والاستخدام

يحدث هذا الحدث animationiteration عندما يتم تكرار الرسوم المتحركة CSS.

إذا كان CSS animationiteration العد يتم تعيين الخاصية إلى "1" ، وهذا يعني أن الرسوم المتحركة وتقام مرة واحدة فقط، لا يحدث هذا الحدث animationiteration. يحتاج الرسوم المتحركة لتشغيل أكثر من مرة لهذا الحدث لاطلاق النار.

لمزيد من المعلومات حول CSS متحركة، انظر البرنامج التعليمي لدينا على CSS3 متحركة .

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

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

دعم المتصفح

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

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

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

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

بناء الجملة

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

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