The following example uses the value "alternate" to make the animation first run forward, then backward, then forward (if the animation-iteration-count is set to 3):
animation-direction: alternate;
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: alternate; } /* 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> I can go forward, then backward, then forward again!</div> </body> |
I can go forward, then backward, then forward again!
|
Note: The directional changes depends on the value you put on the animation-iteration-count. If you make it 2, it would go forward, then backward and then the animation would stop.