animationiteration इवेंट

डॉम इवेंट AnimationEvent

वर्णन और उपयोग

animationiteration इवेंट रिपीटिव CSS एनीमेशन के दौरान होता है।

अगर CSS animation-iteration-count गुणसेट किया जाए "1" तो एनीमेशन केवल एक बार ही चलेगा और animationiteration इवेंट होने वाला नहीं होगा। एनीमेशन को कई बार चलाना चाहिए ताकि इस इवेंट को ट्रिगर किया जा सके。

CSS एनीमेशन के बारे में अधिक जानकारी के लिए हमारे CSS3 एनीमेशन ट्यूटोरियल。

जब CSS एनीमेशन प्लेय होता है तो तीन इवेंट हो सकते हैं:

  • animationstart - जब CSS एनीमेशन शुरू होता है तो होता है
  • animationiteration - जब CSS एनीमेशन दोहराई होती है तो होता है
  • animationend - जब CSS एनीमेशन पूरा होता है तो होता है

उदाहरण

जब CSS एनीमेशन दोहराई होती है तो <div> एलीमेंट पर कुछ करें:

var x = document.getElementById("myDIV");
// च्रोम, सैफारी और ओपेरा के लिए कोड
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// मानक व्याकरण
x.addEventListener("animationiteration", myRepeatFunction);

स्वयं प्रयोग कीजिए

व्याकरण

ऑब्जैक्ट.addEventListener("webkitAnimationIteration", myScript);  // च्रोम, सैफारी और ओपेरा के लिए कोड
ऑब्जैक्ट.addEventListener("animationiteration", myScript);        // मानक व्याकरण

टिप्पणी：इंटरनेट एक्सप्लोरर 8 या उससे पहले की संस्करण इसे समर्थन नहीं करती addEventListener() विधि。

तकनीकी विवरण

बुबलिंग： समर्थन
रद्द करने योग्य： निर्दोष
इवेंट प्रकार： AnimationEvent
डॉम संस्करण： स्तर 3 इवेंट

ब्राउज़र समर्थन

तालिका में अंकों को पहली बार पूर्णता से समर्थन देने वाले ब्राउज़र का संस्करण सूचित किया गया है。

अंक के बाद का "webkit" या "moz" इस्तेमाल करने वाले पहले संस्करण को सूचित करता है。

इवेंट च्रोम आईई फायरफॉक्स सैफारी ओपेरा
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

टिप्पणी：च्रोम, सैफारी और ओपेरा के लिए webkitAnimationEnd का उपयोग करें。

संबंधित पृष्ठ

CSS पाठ्यक्रम：CSS3 एनीमेशन

CSS संदर्भ पुस्तिका：CSS3 animation गुण

CSS संदर्भ पुस्तिका：CSS3 animation-iteration-count गुण

HTML DOM संदर्भ पुस्तिका：Style animation गुण

डॉम इवेंट AnimationEvent