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>
নোট - এটি Chrome 74.0.3729.169-এ টেস্ট করা হয়েছে। আপনার ব্রাউজারের animationEvent-এর সাথে কম্প্যাটিবিলিটি চেক করুন।
আউটপুট
এটি নিচের আউটপুট দেবে:
5s পর, এলিমেন্টটি নিচে_SHIFT করবে:
উপরের উদাহরণে:
আমরা একটি 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;} }
