คุณสมบัติ HTML DOM Style animationTimingFunction

คุณสมบัติ animationTimingFunction ใช้ระบุวิธีที่อนิเมชันก้าวหน้าในแต่ละรอบ โดยการตั้งค่าหรือคืนค่าโค้งความเร็วสำหรับอนิเมชัน โค้งความเร็วกำหนดว่าการเปลี่ยนผ่านจะนุ่มนวลเพียงใด โดยระบุเวลาที่อนิเมชันใช้ในการเคลื่อนที่จากสถานะหนึ่งไปยังอีกสถานะหนึ่ง

ไวยากรณ์ (Syntax)

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

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!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>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม CHANGE TIMING: