HTML DOM Style animationFillMode প্রপার্টি

animationFillMode প্রপার্টি ব্যবহার করে নির্দিষ্ট করা হয় যে একটি অ্যানিমেশন এর শৈলী (styles) কীভাবে প্রয়োগ হবে এর এক্সিকিউশন সময়ের বাইরে — অর্থাৎ অ্যানিমেশন শেষ হলে বা কোনো ডিলে নির্দিষ্ট থাকলে। এটি একটি এলিমেন্টে CSS অ্যানিমেশন শৈলী সেট করতে সাহায্য করে অ্যানিমেশন শুরু হওয়ার আগে এবং শেষ হওয়ার পরে।

সিনট্যাক্স

animationFillMode প্রপার্টি সেট করার সিনট্যাক্স নিচে দেওয়া হল:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

মানসমূহ

নিম্নলিখিত মানগুলো ব্যবহার করা যায়:

উদাহরণ

animationFillMode প্রপার্টির জন্য একটি উদাহরণ নিচে দেওয়া হল:

<!DOCTYPE html> <html> <head> <style> 
  div { 
    height: 30px; 
    width: 30px; 
    background-color: orange; 
    animation: small 4s; 
    animation-fill-mode: forwards; 
  } 
  @keyframes small { 
    0% { width: 200px; height: 200px; background-color: white; } 
    33% { background-color: green; } 
    66% { background-color: violet; } 
    100% { background-color: darkred; } 
  } 
</style> 
<script> 
  function changeFillMode(){ 
    document.getElementById("DIV1").style.animationFillMode="backwards"; 
    document.getElementById("Sample").innerHTML="The animation fillmode is now backwards"; 
  } 
</script> 
</head> 
<body> 
<div id="DIV1"></div> 
<p>Click the below button to change the above animation fillmode property</p> 
<button onclick="changeFillMode()">CHANGE FILL</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

উপরের কোড নিচের আউটপুটটি তৈরি করবে:

অ্যানিমেশন শেষ হলে বর্গক্ষেত্রের রঙ গাঢ়লাল (dark red) হয় কারণ এটি শেষ কী-ফ্রেম:

CHANGE FILL বাটনে ক্লিক করলে রঙ কমলা (orange) এ পরিবর্তিত হয় যা আমাদের প্রথম কী-ফ্রেম:

দ্রষ্টব্য — এই প্রপার্টিটি IE/Edge এবং Safari ব্রাউজারে সাপোর্ট করা হয় না।