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

مثال

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

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

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

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

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

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

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

لمزيد من المعلومات حول CSS Animations ، راجع برنامجنا التعليمي حول CSS3 Animations .

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

Animationstart - يحدث عند بدء الرسوم المتحركة لـ CSS
تحريك الرسوم المتحركة - يحدث عند تكرار الرسوم المتحركة لـ CSS
الرسوم المتحركة - يحدث عند اكتمال الرسوم المتحركة لـ CSS

دعم المتصفح

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

تحدد الأرقام المتبوعة بـ "webkit" أو "moz" الإصدار الأول الذي يعمل مع البادئة.

Event
animationiteration	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

ملاحظة: بالنسبة لمتصفح Chrome و Safari و Opera ، استخدم بادئة webkitAnimationIteration.

بناء الجملة

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

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