Thuộc tính animationPlayState được sử dụng để thiết lập hoặc lấy trạng thái hoạt ảnh cho dù nó đang chạy hay bị tạm dừng. Điều này rất hữu ích trong việc chuyển đổi hoạt ảnh.
Cú pháp
Sau đây là cú pháp cho
Đặt thuộc tính animationPlayState -
object.style.animationPlayState = "running|paused|initial|inherit"
Giá trị
Sau đây là các giá trị -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | Đang chạy Nó chỉ định rằng hoạt ảnh hiện đang chạy và là giá trị mặc định. |
| 2 | Bị tạm dừng Để chỉ định hoạt ảnh bị tạm dừng. |
| 3 | Ban đầu Để thiết lập thuộc tính này thành giá trị ban đầu. |
| 4 | inherit Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính 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: play;
}
@keyframes move {
from {top: 0px; }
to {top: 400px;}
}
</style>
<script>
function stateToggle(){
document.getElementById("DIV1").style.animationPlayState="paused";
document.getElementById("Sample").innerHTML="The animation is now paused";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to toggle the above animation state</p>
<button onclick="stateToggle()">CHANGE STATE</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau khi hộp di chuyển từ trên xuống dưới -
Khi nhấp vào THAY ĐỔI TRẠNG THÁI -
