एनीमेशनप्लेस्टेट संपत्ति का उपयोग एनीमेशन स्थिति को सेट करने या प्राप्त करने के लिए किया जाता है चाहे वह चल रहा हो या रोका गया हो। यह एनिमेशन को टॉगल करने में उपयोगी है।
सिंटैक्स
. के लिए सिंटैक्स निम्नलिखित है
एनीमेशनप्लेस्टेट प्रॉपर्टी सेट करना -
object.style.animationPlayState = "running|paused|initial|inherit"
मान
निम्नलिखित मान हैं -
| Sr.No | <वें शैली ="चौड़ाई:90.7152%; पाठ-संरेखण:केंद्र;">मान और विवरण|
|---|---|
| 1 | चल रहा है यह निर्दिष्ट करता है कि एनीमेशन वर्तमान में चल रहा है और डिफ़ॉल्ट मान है। |
| 2 | रोका गया एनीमेशन निर्दिष्ट करने के लिए रोका गया है। |
| 3 | आरंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| 4 | उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए। |
उदाहरण
आइए एनीमेशनप्लेस्टेट संपत्ति के लिए एक उदाहरण देखें -
<!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> आउटपुट
यह निम्न आउटपुट उत्पन्न करेगा क्योंकि बॉक्स ऊपर से नीचे की ओर जाता है -
चेंज स्टेट पर क्लिक करने पर -
