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