animationName प्रॉपर्टी का उपयोग @keyframes के संदर्भ के लिए एनिमेशन नाम प्राप्त करने या सेट करने के लिए किया जाता है।
सिंटैक्स
animationName प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.animationName = "none|keyframename|initial|inherit"
मान
निम्नलिखित मान हैं:
| क्रमांक | मान एवं विवरण | ||
|---|---|---|---|
| 1 | None यह डिफ़ॉल्ट मान है जो दर्शाता है कि कोई एनिमेशन नहीं होगा। | ||
| 2 | keyframename | सेलेक्टर से बांधने के लिए कीफ्रेम नाम निर्दिष्ट करने के लिए। | |
| 3 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। | ||
| 4 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
animationName प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> div { width: 60px; height: 40px; border: 10px groove fuchsia; position: relative; animation-name: bravo; animation-iteration-count:infinite; animation-duration: 5s; } @keyframes bravo { from {left: 0px; } to {left: 600px;} } @keyframes NEW_FRAME { from {left:550px; } to {left: 0px;} } </style> <script> function nameChange(){ document.getElementById("DIV1").style.animationName="NEW_FRAME"; document.getElementById("Sample").innerHTML="The animation name is now NEW_FRAME"; } </script> </head> <body> <div id="DIV1">SAMPLE TEXT</div> <p>Click the below button to change the above animation fillmode property</p> <button onclick="nameChange()">CHANGE NAME</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा। एनिमेशन बाएं से दाएं चलती है:
CHANGE NAME बटन पर क्लिक करने पर एनिमेशन बाएं से दाएं चलती है:
