HTML DOM एनिमेशनइवेंट जावास्क्रिप्ट में एक ऑब्जेक्ट है जो CSS एनीमेशन के चलने पर होने वाली घटनाओं को संभालता है। यह मूल रूप से हमें उन घटनाओं के बारे में जानकारी प्रदान करता है जो एनीमेशन से संबंधित हैं। यह हमें CSS एनिमेशन पर अधिक नियंत्रण प्रदान करता है। यह घटनाओं और एनिमेशन के बीच के संबंध का वर्णन करता है कि किन घटनाओं ने एनिमेशन को ट्रिगर किया।
गुण
एनिमेशन इवेंट के लिए निम्नलिखित गुण हैं -
| संपत्ति | विवरण |
|---|---|
| एनीमेशन नाम | यह निष्पादित किए जा रहे एनिमेशन का नाम लौटाएगा। |
| बीता हुआ समय | ऐनिमेशन के सेकंडों में चलने के बाद से बीता हुआ समय लौटाता है। |
| छद्म तत्व | यह एनीमेशन के छद्म तत्व का नाम देता है। जैसे:::पहले, ::बाद, ::पहली पंक्ति आदि। |
सिंटैक्स
एनीमेशनइवेंट के लिए सिंटैक्स निम्नलिखित है -
animationEvent.property
उदाहरण
आइए एनीमेशनइवेंट के लिए एक उदाहरण देखें -
<!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 पर किया गया था। एनीमेशनइवेंट के लिए अपने ब्राउज़र की संगतता की जाँच करें।
आउटपुट
यह निम्नलिखित आउटपुट देगा -
5s के बाद, तत्व नीचे की ओर शिफ्ट हो जाएगा -
उपरोक्त उदाहरण में -
हमने 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;}
}