Thuộc tính animationDuration trong HTML DOM Style

Thuộc tính animationDuration xác định thời gian cần thiết để một hoạt ảnh hoàn thành một chu kỳ. Giá trị mặc định là 0s, nghĩa là hoạt ảnh sẽ không chạy nếu không thiết lập thuộc tính này.

Cú pháp

Để thiết lập thuộc tính animationDuration:

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

Các giá trị

Ví dụ

Ví dụ minh họa cho 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 = "Thời gian hoạt ảnh đã tăng từ 5s lên 10s"; 
  } 
</script> </head> 
<body> 
<div id="DIV1"></div> 
<p>Nhấn nút để thay đổi thời lượng hoạt ảnh</p> 
<button onclick="changeDuration()">THAY ĐỔI THỜI LƯỢNG</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Hoạt ảnh ban đầu chạy trong 5 giây:

Sau khi nhấn nút, thời lượng tăng lên 10 giây: