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

animationIterationCount প্রপার্টি ব্যবহার করে অ্যানিমেশন কতবার প্লে হবে তা সেট বা গেট করা হয়।

সিনট্যাক্স

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

object.style.animationIterationCount = "number|infinite|initial|inherit"

মানসমূহ

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> 
  p { 
    color: black; 
    animation: shrink 3s; 
    animation-timing-function: ease; 
    animation-iteration-count: 1; 
  } 
  @keyframes shrink { 
    0% { 
      color: white; 
      letter-spacing: 1.8em; 
    } 
    100% { 
      color: magenta; 
      letter-spacing: 0.01em; 
    } 
  } 
</style> 
<script> 
  function IncreaseIteration(){ 
    document.getElementById("PARA1").style.animationIterationCount=5; 
    document.getElementById("Sample").innerHTML="The animation Iteration count is now 5"; 
  } 
</script> 
</head> 
<body> 
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p> 
<p>Click the below button to change how many times the above animation will run</p> 
<button onclick="IncreaseIteration()">INCREASE COUNT</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে:

COORDINATES বাটনে ক্লিক করলে এবং "Know your location" পপআপে Allow ক্লিক করলে: