Thuộc tính animationIterationCount trong HTML DOM Style

Thuộc tính animationIterationCount xác định số lần hoạt ảnh sẽ lặp lại. Có thể là một số cụ thể hoặc infinite để lặp vô hạn.

Cú pháp

Để thiết lập animationIterationCount:

object.style.animationIterationCount = "number|infinite|initial|inherit"

Các giá trị

Ví dụ

Ví dụ minh họa animationIterationCount:

<!DOCTYPE html> <html> <head> <style> 
  p { 
    color: black; 
    animation: shrink 3s; 
    animation-timing-function: ease; 
    animation-iteration-count: 1; 
  } 
  @keyframes shrink { 
    0% { color: white; letter-spacing: 1.8em; } 
    100% { color: magenta; letter-spacing: 0.01em; } 
  } 
</style> 
<script> 
  function IncreaseIteration(){ 
    document.getElementById("PARA1").style.animationIterationCount = 5; 
    document.getElementById("Sample").innerHTML = "Số lần lặp hoạt ảnh hiện là 5"; 
  } 
</script> </head> 
<body> 
<p id="PARA1">Văn bản minh họa hoạt ảnh</p> 
<p>Nhấn nút để tăng số lần lặp lên 5</p> 
<button onclick="IncreaseIteration()">TĂNG SỐ LẶP</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Hoạt ảnh chạy 1 lần:

Sau khi nhấn nút, hoạt ảnh lặp 5 lần: