HTML DOM অ্যানিমেশন ইভেন্ট

এইচটিএমএল ডম অ্যানিমেশন ইভেন্ট হল জাভাস্ক্রিপ্টের একটি বস্তু যা CSS অ্যানিমেশন চালানোর সময় ঘটে এমন ঘটনাগুলি পরিচালনা করে। এটি মূলত অ্যানিমেশনের সাথে সম্পর্কিত ইভেন্টগুলি সম্পর্কে আমাদের তথ্য সরবরাহ করে। এটি আমাদের CSS অ্যানিমেশনগুলির উপর একটি বৃহত্তর নিয়ন্ত্রণ অফার করে। কোন ঘটনাগুলি অ্যানিমেশনগুলিকে ট্রিগার করেছে তা বর্ণনা করে এটি ইভেন্ট এবং অ্যানিমেশনের মধ্যে সম্পর্ককে উপস্থাপন করে৷

সম্পত্তি

অ্যানিমেশন ইভেন্ট -

এর বৈশিষ্ট্যগুলি নীচে দেওয়া হল

সম্পত্তি	বিবরণ
অ্যানিমেশন নাম	এটি কার্যকর করা অ্যানিমেশনের নাম ফিরিয়ে দেবে।
অতিক্রান্ত সময়	অ্যানিমেশন সেকেন্ডে চলার পর থেকে অতিবাহিত সময় ফেরত দেয়।
pseudoElement	এটি অ্যানিমেশনের ছদ্ম-উপাদানের নাম প্রদান করে। যেমন:::আগে, ::পরে, ::প্রথম লাইন ইত্যাদি।

সিনট্যাক্স

অ্যানিমেশন ইভেন্ট -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

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>

দ্রষ্টব্য − এটি chrome 74.0.3729.169-এ পরীক্ষা করা হয়েছে। অ্যানিমেশন ইভেন্টের জন্য আপনার ব্রাউজার সামঞ্জস্যপূর্ণতা পরীক্ষা করুন।

আউটপুট

এটি নিম্নলিখিত আউটপুট তৈরি করবে -

HTML DOM অ্যানিমেশন ইভেন্ট

5s পরে, উপাদানটি নিচের দিকে সরে যাবে −

HTML DOM অ্যানিমেশন ইভেন্ট

উপরের উদাহরণে -

আমরা একটি 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;}
}