The animationPlayState property is used for setting or getting the animation state whether it is running or paused. This is useful in toggling animations.
Syntax
Following is the syntax for
Setting the animationPlayState property −
object.style.animationPlayState = "running|paused|initial|inherit"
Values
Following are the values −
| Sr.No | Values & Description |
|---|---|
| 1 | Running It specifies that the animation is currently running and is the default value. |
| 2 | Paused For specifying the animation is paused. |
| 3 | Initial For setting this property to initial value. |
| 4 | inherit To inherit the parent property value. |
Example
Let us look at an example for the animationPlayState property −
<!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>Output
This will produce the following output as the box moves from top to bottom −
On clicking the CHANGE STATE −
