CSS animation-direction प्रॉपर्टी से एनिमेशन दिशा नियंत्रित करें

CSS animation-direction प्रॉपर्टी निर्दिष्ट करती है कि एनिमेशन आगे (forwards), पीछे (backwards), या वैकल्पिक चक्रों (alternate cycles) में चलना चाहिए।

उदाहरण

नीचे दिए गए उदाहरण में, animation-direction: reverse का उपयोग करके एनिमेशन को उल्टी दिशा में चलाया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-direction: reverse;
    }
    @keyframes myanim {
      from {background-color: green;}
      to {background-color: blue;}
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

animation-direction के मान:

• normal (डिफ़ॉल्ट): प्रत्येक चक्र में आगे चलता है
• reverse: प्रत्येक चक्र में पीछे चलता है
• alternate: विषम चक्र आगे, सम चक्र पीछे
• alternate-reverse: विषम चक्र पीछे, सम चक्र आगे