animationend इवेंट

परिभाषा और उपयोग

CSS एनिमेशन समाप्त होने पर animationend इवेंट होता है。

CSS एनिमेशन के बारे में अधिक जानकारी के लिए हमारे CSS3 एनिमेशन शिक्षा

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

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

उदाहरण

CSS एनिमेशन समाप्त होने पर <div> एलीमेंट पर कुछ करें:

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

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

व्याकरण

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

टिप्पणी:इंटरनेट एक्सप्लोरर 8 या उससे पहले की संस्करण इसका उपयोग नहीं करती है addEventListener() विधि

तकनीकी विस्तार

बुबलिंग: समर्थन
रद्द करने योग्य: निर्दोष
इवेंट क़िस्म: AnimationEvent
DOM संस्करण: स्तर 3 इवेंट

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

तालिका में संख्याएँ इस इवेंट के पूर्ण समर्थन वाली पहली ब्राउज़र संस्करण को इशारा करती हैं。

संख्या के बाद का "webkit" या "moz" पूर्वसूचक का पहला संस्करण का उपयोग करने का इशारा करता है。

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

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

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

CSS शिक्षा:CSS3 एनीमेशन

CSS संदर्भ दस्तावेज़ःCSS3 animation एट्रिब्यूट

HTML DOM संदर्भ दस्तावेज़ःStyle animation एट्रिब्यूट