HTML DOM AnimationEvent जावास्क्रिप्ट में एक ऑब्जेक्ट है जो उन इवेंट्स को संभालता है जो CSS एनिमेशन चलने पर होते हैं। यह मूल रूप से हमें एनिमेशन से संबंधित इवेंट्स के बारे में जानकारी प्रदान करता है। यह हमें CSS एनिमेशन पर अधिक नियंत्रण प्रदान करता है। यह इवेंट्स और एनिमेशन के बीच संबंध को दर्शाता है द्वारा वर्णन करता है कि कौन से इवेंट्स ने एनिमेशन को ट्रिगर किया।
प्रॉपर्टीज
Animation Event के लिए निम्नलिखित प्रॉपर्टीज हैं -
| प्रॉपर्टी | विवरण |
|---|---|
| animationName | यह निष्पादित हो रही एनिमेशन का नाम लौटाएगा। |
| elapsedTime | सेकंड में एनिमेशन चलने के बाद से बीता समय लौटाता है। |
| pseudoElement | यह एनिमेशन के छद्म-एलिमेंट का नाम लौटाता है। जैसे: ::before, ::after, ::first-line आदि। |
सिंटैक्स
animationEvent के लिए निम्नलिखित सिंटैक्स है -
animationEvent.property
उदाहरण
आइए animationEvent का एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> #ANIM-DIV { margin: 10px; width: 400px; height: 100px; background: lightgreen; position: relative; font-size: 30px; animation-name: animMove; animation-duration: 5s; } @-webkit-keyframes animMove { from {top: 0px;} to {top: 200px;} } </style> </head> <body> <div id="ANIM-DIV"></div> <script> var x = document.getElementById("ANIM-DIV"); x.addEventListener("animationstart", myAnimFunction); function myAnimFunction(event) { this.innerHTML = "The animation-name is: " + event.animationName; } </script> </body> </html>
नोट - यह क्रोम 74.0.3729.169 पर टेस्ट किया गया था। animationEvent के लिए अपने ब्राउज़र की संगतता जांचें।
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
5 सेकंड के बाद, एलिमेंट नीचे की ओर शिफ्ट होगा -
उपरोक्त उदाहरण में -
हमने एक div का उपयोग करके 400px X 100px का आयताकार बॉक्स बनाया है।
#ANIM-DIV { margin: 10px; width: 400px; height: 100px; background: lightgreen; position: relative; font-size: 30px; animation-name: animMove; animation-duration: 5s; }
हमने फिर उन प्रारंभ और अंत स्थितियों को निर्दिष्ट किया है जिनके बीच div एनिमेट करने के लिए चलेगा -
@-webkit-keyframes animMove { from {top: 0px;} to {top: 200px;} }
