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

animationTimingFunction ব্যবহার করে নির্দিষ্ট করা হয় যে অ্যানিমেশন কীভাবে তার সাইকেলের সময় প্রগ্রেস করবে। এটি অ্যানিমেশনের জন্য গতির কার্ভ (speed curve) সেট বা রিটার্ন করে এটি করে। গতির কার্ভ সংজ্ঞায়িত করে ট্রানজিশনগুলো কতটো সুম্ভব হবে একটি স্টেট থেকে অন্যটিতে যেতে কত সময় লাগছে তা নির্দিষ্ট করে।

সিনট্যাক্স

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

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

মানসমূহ

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> 
  #PARA1{ 
    border: 2px solid black; 
    position: relative; 
    animation: demo 5s infinite; 
    animation-timing-function: linear; 
  } 
  @keyframes demo { 
    from {background-color: lightcoral; color:black;} 
    to {background-color: indigo; color:white;} 
  } 
</style> 
<script> 
  function timingChange(){ 
    document.getElementById("PARA1").style.animationTimingFunction="ease"; 
    document.getElementById("Sample").innerHTML="The animation timing is now set to ease."; 
  } 
</script> 
</head> 
<body> 
<p id="PARA1"> Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras pulvinar mattis nunc sed blandit libero.</p> 
<p>Click the below button to change the above animation name</p> 
<button onclick="timingChange()">CHANGE TIMING</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

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

CHANGE TIMING বাটনে ক্লিক করলে: