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

animationDuration প্রপার্টি ব্যবহার করে একটি অ্যানিমেশন এক সাইকেল সম্পন্ন করতে কত সময় লাগবে তা নির্দিষ্ট করা হয়।

সিনট্যাক্স

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

object.style.animationDuration = "time|initial|inherit"

মানসমূহ

উদাহরণ

animationDuration প্রপার্টির একটি উদাহরণ:

<!DOCTYPE html> <html> <head> <style> 
  div { 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    border: 8px solid orange; 
    position: relative; 
    animation: ring infinite; 
    animation-duration: 5s; 
  } 
  @keyframes ring { 
    from {top: 0px; left:0px} 
    to {border-color: purple; left: 500px;} 
  } 
</style> 
<script> 
  function changeDuration(){ 
    document.getElementById("DIV1").style.animationDuration="10s"; 
    document.getElementById("Sample").innerHTML="The animation duration has been increased from 5s to 10s"; 
  } 
</script> 
</head> 
<body> 
<div id="DIV1"></div> 
<p>Click the below button to create the above animation duration</p> 
<button onclick="changeDuration()">CHANGE DURATION</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

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

অ্যানিমেশন কিছুক্ষণ পর রঙ পরিবর্তন করে:

CHANGE DURATION বাটনে ক্লিক করলে অ্যানিমেশন ডুরেশন ১০ সেকেন্ডে বৃদ্ধি পাবে: