رویداد animationstart

رویدادهای DOM AnimationEvent

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

وقتی که CSS آنیمیشن شروع به پخش می‌شود، رویداد animationstart رخ می‌دهد.

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

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

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

مثال

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

var x = document.getElementById("myDIV");
// کد برای Chrome، Safari و Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// زبان استاندارد
x.addEventListener("animationstart", myStartFunction);

آزمایش کنید

زبان

object.addEventListener("webkitAnimationStart", myScript);  // کد برای Chrome، Safari و Opera
object.addEventListener("animationstart", myScript);        // زبان استاندارد

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

جزئیات فنی

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

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

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

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

رویداد Chrome IE Firefox Safari Opera
animationstart 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

دستورالعمل HTML DOM:ویژگی animation Style

رویدادهای DOM AnimationEvent