The animation-direction property is used to let an animation run in reverse direction or alternate cycles. Use the following syntax to run an animation in reverse direction:
animation-direction: reverse;
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
/* The element to apply the animation to */ div { width: 100px; height: 100px; position: relative; background-color: red; padding: 5px; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; animation-iteration-count: 3; animation-direction: reverse; } /* The animation code for Chrome, Safari, Opera*/ @-webkit-keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } /* The animation code in Standard syntax*/ @keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } </style> <body> Watch me go three times in reverse!</div> </body> |
Watch me go three times in reverse!
|
Note: The colors are displayed in reverse as well. First red, then green, blue, yellow and back to red.
