एनिमेशन को पहले बैकवर्ड फिर फॉरवर्ड चलाने के लिए animation-direction प्रॉपर्टी का उपयोग करें। इस प्रॉपर्टी को alternate-reverse एनिमेशन वैल्यू के साथ उपयोग किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { 0% {background-color:green; left:0px; top:0px;} 50% {background-color:maroon; left:100px; top:100px;} 100% {background-color:gray; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>
