animationDirection प्रॉपर्टी का उपयोग एनिमेशन की दिशा निर्दिष्ट करने के लिए किया जाता है जो आगे, पीछे या वैकल्पिक हो सकती है।
सिंटैक्स
animationDirection प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
मान
निम्नलिखित मान संभव हैं:
| मान | विवरण |
|---|---|
| Normal | यह डिफ़ॉल्ट मान है जो दर्शाता है कि एनिमेशन सामान्य रूप से चलना चाहिए। |
| Reverse | यह दर्शाने के लिए कि एनिमेशन को रिवर्स में चलना चाहिए। |
| Alternate | विषम समय पर एनिमेशन को सामान्य रूप से और सम समय पर रिवर्स दिशा में चलाने के लिए। |
| alternate-reverse | यह alternate का रिवर्स है और विषम समय पर एनिमेशन को रिवर्स दिशा में और सम समय पर सामान्य दिशा में चलाता है। |
| Initial | इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| inherit | इस प्रॉपर्टी को अपने पैरेंट तत्व से विरासत में लेने के लिए। |
उदाहरण
animationDirection प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 80px; background: skyblue; position: relative; animation: high 5s infinite; z-index:-1; animation-direction:normal; } @keyframes high { 0% {left: 0px; top: 0px;} 25% {background-color: lightblue; left: 0px; top: 0px;} 50% {background-color: lightgreen; left: 550px; top: 80px;} 75% {background-color: lightblue; left: 0px; top: 80px;} 100% {left: 0px; top: 0px;} } </style> <script> function changeDir(){ document.getElementById("DIV1").style.animationDirection="alternate-reverse" } </script> </head> <body> <h1>animationDirection property example</h1> <div id="DIV1"></div> <p>Change the animation direction of the div by clicking the below button</p> <button onclick="changeDir()">CHANGE DIRECTION</button> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
जैसे-जैसे एनिमेशन आगे बढ़ता है, यह विकर्ण रूप से दाईं ओर बढ़ेगा:
CHANGE DIRECTION पर क्लिक करने पर, यह पहले प्रारंभिक बिंदु से नीचे जाएगा और फिर रिवर्स में चलेगा:
