एनिमेशन-दिशा गुण

animation-direction गुण एनिमेशन की दिशा निर्धारित करता है। डिफ़ॉल्ट रूप से एनिमेशन केवल 1 बार दोहराएगा और फिर वापस अपनी मूल स्थिति में आ जाएगा, फिर, यदि animation-delay निर्दिष्ट की गई है, तो निर्दिष्ट समय तक प्रतीक्षा करेगा और उसके बाद चक्र फिर से शुरू होगा।

यह गुण इस व्यवहार को बदलने की अनुमति देता है, उदाहरण के लिए, ऐसा कि एनिमेशन समाप्त होने के बाद जहाँ समाप्त हुआ वहीं रहे, न कि वापस प्रारंभिक स्थिति में कूद जाए।

आप ऐसा व्यवहार भी निर्धारित कर सकते हैं: एनिमेशन अंतिम बिंदु तक जाएगा और वापस लौट आएगा (जैसा कि transition में होता है)। नीचे विवरण देखें।

सिंटैक्स

cssसिलेक्टर {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

मान

मान	विवरण
`reverse`	एनिमेशन उल्टी दिशा में चलेगा।
`alternate`	एनिमेशन पहले सीधी दिशा में, और फिर उल्टी दिशा में चलेगा (transition की तरह)।
`alternate-reverse`	एनिमेशन अंतिम स्थिति से प्रारंभिक स्थिति की ओर और वापस चलेगा। मूल रूप से यह `alternate` और `reverse` मान एक साथ हैं।
`normal`	एनिमेशन प्रारंभ से अंत तक चलेगा, और समाप्त होने के बाद झटके से प्रारंभिक स्थिति में वापस आ जाएगा।

डिफ़ॉल्ट मान: normal.

उदाहरण

अब तत्व एक दिशा में आगे बढ़ेगा, और फिर वापस लौट आएगा, क्योंकि alternate मान निर्दिष्ट किया गया है। साथ ही animation-duration का मान 3 सेकंड है और इसका मतलब है, कि "आगे" और "पीछे" की गति 3 सेकंड तक चलेगी:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

उदाहरण

अब तत्व उल्टी दिशा में आगे बढ़ेगा (बाएं से दाएं जाना चाहिए, लेकिन दाएं से बाएं जाएगा):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

उदाहरण

अब तत्व आगे-पीछे आगे बढ़ेगा, लेकिन उल्टी दिशा में (बाएं से शुरू होना चाहिए, लेकिन दाएं से शुरू होगा):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

यह भी देखें

animation-name गुण,
जो एनिमेशन का नाम निर्दिष्ट करता है
animation-duration गुण,
जो एनिमेशन की अवधि निर्दिष्ट करता है
animation-delay गुण,
जो एनिमेशन शुरू होने से पहले देरी निर्दिष्ट करता है
animation-timing-function गुण,
जो एनिमेशन की गति निर्दिष्ट करता है
animation-iteration-count गुण,
जो एनिमेशन के पुनरावृत्तियों की संख्या निर्दिष्ट करता है
animation-fill-mode गुण,
जो एनिमेशन की स्थिति निर्दिष्ट करता है
animation-play-state गुण,
जो एनिमेशन को रोकने की अनुमति देता है
animation गुण,
जो एनिमेशन के लिए एक संक्षिप्त रूप है
@keyframes कमांड,
जो एनिमेशन की कीफ़्रेम निर्दिष्ट करती है
transition सुगम संक्रमण, जो तत्व पर होवर करने पर एनिमेशन का प्रतिनिधित्व करते हैं