Which CSS property is used to run Animation in Alternate Cycles?



Use the animation-direction property to run animation in an alternate direction. The property is used with the alternate 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: alternate;             animation-iteration-count: 3;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }       </style>    </head>    <body>       <div></div>    </body> </html>
Updated on: 2020-06-23T15:50:37+05:30

162 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements