- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style animationPlayState Property
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 −
Updated on: 15-Feb-2021
12 Views
Advertisements