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

animationName প্রপার্টি ব্যবহার করে @keyframes-এর রেফারেন্সের জন্য অ্যানিমেশনের নাম গেট বা সেট করা হয়।

সিনট্যাক্স

animationName প্রপার্টি সেট করার সিনট্যাক্স:

object.style.animationName = "none|keyframename|initial|inherit"

মানসমূহ

উদাহরণ

animationName প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> <style> 
  div { 
    width: 60px; 
    height: 40px; 
    border: 10px groove fuchsia; 
    position: relative; 
    animation-name: bravo; 
    animation-iteration-count:infinite; 
    animation-duration: 5s; 
  } 
  @keyframes bravo { 
    from {left: 0px; } 
    to {left: 600px;} 
  } 
  @keyframes NEW_FRAME { 
    from {left:550px; } 
    to {left: 0px;} 
  } 
</style> 
<script> 
  function nameChange(){ 
    document.getElementById("DIV1").style.animationName="NEW_FRAME"; 
    document.getElementById("Sample").innerHTML="The animation name is now NEW_FRAME"; 
  } 
</script> 
</head> 
<body> 
<div id="DIV1">SAMPLE TEXT</div> 
<p>Click the below button to change the above animation fillmode property</p> 
<button onclick="nameChange()">CHANGE NAME</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে। অ্যানিমেশন বাম থেকে ডানে যাবে:

CHANGE NAME বাটনে ক্লিক করলে অ্যানিমেশন বাম থেকে ডানে যাবে: