Use the value "infinite" to make the animation continue forever:
animation-iteration-count: infinite;
| 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: infinite; } /* 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> <div>I can do this forever!</div> </body> |
I can do this forever!
|
Note: This example does not work in Internet Explorer 9 and earlier versions.
