Which CSS property is used to run Animation in Reverse Direction?



Use the animation-direction property to run animation in reverse direction. The property is used with the reverse animation value to achieve this.

Example

Live Demo

<!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>
Updated on: 2020-06-23T15:48:25+05:30

279 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements