حدث 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);

آزمایش کنید

زبان

مورد.addEventListener("webkitAnimationIteration", myScript);  // کد برای Chrome،Safari و Opera
مورد.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