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

animationPlayState প্রপার্টি ব্যবহার করে অ্যানিমেশনের স্টেট সেট বা গেট করা হয় — এটি চলছে কিনা বা পজ করা আছে। এটি অ্যানিমেশন টগল করার জন্য উপকারী।

সিনট্যাক্স

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

object.style.animationPlayState = "running|paused|initial|inherit"

মানসমূহ

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> 
  div { 
    width: 70px; 
    height: 30px; 
    border: 3px solid brown; 
    box-shadow: 0 20px 0 -3px orchid; 
    z-index:-1; 
    position: relative; 
    animation: move 5s infinite; 
    animation-play-state: play; 
  } 
  @keyframes move { 
    from {top: 0px; } 
    to {top: 400px;} 
  } 
</style> 
<script> 
  function stateToggle(){ 
    document.getElementById("DIV1").style.animationPlayState="paused"; 
    document.getElementById("Sample").innerHTML="The animation is now paused"; 
  } 
</script> 
</head> 
<body> 
<div id="DIV1"></div> 
<p>Click the below button to toggle the above animation state</p> 
<button onclick="stateToggle()">CHANGE STATE</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে বক্স উপরের থেকে নিচে যাওয়ার সাথে সাথে:

CHANGE STATE-এ ক্লিক করলে: