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

คุณสมบัติ animationDuration ใช้ระบุระยะเวลาที่อนิเมชันใช้ในการทำงานหนึ่งรอบ (cycle)

ไวยากรณ์ (Syntax)

รูปแบบการตั้งค่าคุณสมบัติ animationDuration ดังนี้:

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

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

ตัวอย่าง (Example)

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

ผลลัพธ์ (Output)

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

อนิเมชันเปลี่ยนสีหลังจากผ่านไปสักระยะ:

เมื่อคลิกปุ่ม CHANGE DURATION ระยะเวลาอนิเมชันจะเพิ่มเป็น 10 วินาที: