رویداد animationiteration

رویدادهای DOM AnimationEvent

تعریف و استفاده

رویداد animationiteration در تکرار انیمیشن CSS رخ می‌دهد.

اگر خصوصیت animation-iteration-count CSSتنظیم به "1"، به معنای آن است که انیمیشن فقط یک بار پخش می‌شود و رویداد animationiteration رخ نمی‌دهد. انیمیشن باید چندین بار اجرا شود تا این رویداد فعال شود.

برای اطلاعات بیشتر در مورد انیمیشن CSS، لطفاً دوره ما را مطالعه کنید آموزش انیمیشن CSS3.

وقتی انیمیشن CSS پخش می‌شود، ممکن است سه رویداد رخ دهد:

  • animationstart - وقتی انیمیشن CSS شروع می‌شود رخ می‌دهد
  • animationiteration - وقتی انیمیشن CSS تکرار می‌شود رخ می‌دهد
  • animationend - وقتی انیمیشن CSS کامل شد رخ می‌دهد

مثال

وقتی انیمیشن CSS تکرار می‌شود، چند کار برای عنصر <div> انجام دهید:

var x = document.getElementById("myDIV");
// کد برای Chrome،Safari و Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// نحوه استاندارد
x.addEventListener("animationiteration", myRepeatFunction);

آزمایش کنید

نحوه نوشتن

object.addEventListener("webkitAnimationIteration", myScript);  // کد برای Chrome،Safari و Opera
object.addEventListener("animationiteration", myScript);        // نحوه استاندارد

توضیحات:اینترنت اکسپلورر 8 و نسخه‌های قبلی آن از آن پشتیبانی نمی‌کند مетод addEventListener().

جزئیات فنی

بالابردگی: پشتیبانی می‌شود
قابل لغو: پشتیبانی نمی‌شود
نوع رویداد: AnimationEvent
نسخه DOM: رویدادهای سطح 3

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این رویداد را به طور کامل پشتیبانی می‌کنند.

عدد بعد از "webkit" یا "moz" نشان‌دهنده نسخه اولیه استفاده از پیشوند است.

رویداد Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

توضیحات:برای Chrome،Safari و Opera از webkitAnimationEnd استفاده کنید.

صفحات مرتبط

آموزش CSS:انیمیشن CSS3

دستورالعمل CSS:ویژگی animation CSS3

دستورالعمل CSS:ویژگی animation-iteration-count CSS3

دستورالعمل HTML DOM:خصوصیت animation Style

رویدادهای DOM AnimationEvent