animationIterationCount प्रॉपर्टी का उपयोग एनिमेशन के चलने की संख्या को सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स
animationIterationCount प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.animationIterationCount = "number|infinite|initial|inherit"
मान
निम्नलिखित मान हैं:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | number संख्यात्मक मान जो दर्शाता है कि एनिमेशन को कितनी बार चलाया जाना चाहिए। यह डिफ़ॉल्ट रूप से 1 पर सेट होता है। |
| 2 | infinite यह एनिमेशन को अनिश्चित काल तक चलाता है। |
| 3 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 4 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
animationIterationCount प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> p { color: black; animation: shrink 3s; animation-timing-function: ease; animation-iteration-count: 1; } @keyframes shrink { 0% { color: white; letter-spacing: 1.8em; } 100% { color: magenta; letter-spacing: 0.01em; } } </style> <script> function IncreaseIteration(){ document.getElementById("PARA1").style.animationIterationCount=5; document.getElementById("Sample").innerHTML="The animation Iteration count is now 5"; } </script> </head> <body> <p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p> <p>Click the below button to change how many times the above animation will run</p> <button onclick="IncreaseIteration()">INCREASE COUNT</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
COORDINATES बटन पर क्लिक करने और "Know your location" पॉपअप पर Allow क्लिक करने पर:
