Thuộc tính animationPlayState trong HTML DOM Style

Thuộc tính animationPlayState cho phép tạm dừng hoặc tiếp tục hoạt ảnh. Rất hữu ích để tạo điều khiển play/pause cho người dùng.

Cú pháp

Để thiết lập animationPlayState:

object.style.animationPlayState = "running|paused|initial|inherit"

Các giá trị

Ví dụ

Ví dụ minh họa animationPlayState:

<!DOCTYPE html> <html> <head> <style> 
  div { 
    width: 70px; 
    height: 30px; 
    border: 3px solid brown; 
    box-shadow: 0 20px 0 -3px orchid; 
    z-index: -1; 
    position: relative; 
    animation: move 5s infinite; 
    animation-play-state: running; 
  } 
  @keyframes move { 
    from { top: 0px; } 
    to { top: 400px; } 
  } 
</style> 
<script> 
  function stateToggle(){ 
    document.getElementById("DIV1").style.animationPlayState = "paused"; 
    document.getElementById("Sample").innerHTML = "Hoạt ảnh đã được tạm dừng"; 
  } 
</script> </head> 
<body> 
<div id="DIV1"></div> 
<p>Nhấn nút để tạm dừng hoạt ảnh</p> 
<button onclick="stateToggle()">THAY ĐỔI TRẠNG THÁI</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Hộp di chuyển từ trên xuống dưới:

Sau khi nhấn nút, hộp dừng lại tại vị trí hiện tại: