एनीमेशन डायरेक्शन प्रॉपर्टी का उपयोग एनिमेशन की दिशा निर्दिष्ट करने के लिए किया जाता है जो आगे, पीछे या वैकल्पिक हो सकता है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैएनिमेशनडायरेक्शन प्रॉपर्टी सेट करना -
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
मान
निम्नलिखित मान हैं -
| मान | विवरण |
|---|---|
| सामान्य | यह डिफ़ॉल्ट मान है जो दर्शाता है कि एनिमेशन को सामान्य रूप से चलना चाहिए। |
| उल्टा करें | यह इंगित करने के लिए कि एनिमेशन को उल्टा चलना चाहिए। |
| वैकल्पिक | विषम समय पर सामान्य रूप से चलाए गए एनिमेशन और सम समय में विपरीत दिशा में चलने के लिए। |
| वैकल्पिक-रिवर्स | यह वैकल्पिक का उल्टा है और ई-एनीमेशन को हर विषम समय में विपरीत दिशा में और हर सम समय सामान्य दिशा में चलाता है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए |
| उत्तराधिकारी | इस संपत्ति को इसके मूल तत्व से विरासत में मिला है। |
उदाहरण
आइए हम एनिमेशनडायरेक्शन प्रॉपर्टी के उदाहरण को देखते हैं -
<!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 पर क्लिक करने पर, यह पहले शुरुआती बिंदु से नीचे जाएगा और फिर विपरीत दिशा में जाएगा -
