looping a CSS3 animation with multiple keyframes <p>I managed to make multiple key-frames in an animation play one after another </p> <p><a href="http://jsfiddle.net/NuMjW/" rel="nofollow">http://jsfiddle.net/NuMjW/</a></p> <p>but can't make the whole loop, so currently it plays the sequence once and then its done, is there a way to make it loop without using jquery or javascript to restart it after n seconds have passed.</p> <pre><code>.hi { width: 48px; height: 48px; background-image: url("http://s30.postimg.org/k4qce9z1r/warp.png"); -webkit-animation: play1 0.3s 0s steps(5) forwards, play2 0.3s 0.3s steps(5) forwards, play3 0.3s 0.6s steps(5) forwards; } @-webkit-keyframes play1 { from { background-position-y: 0px; background-position-x: 0px; } to { background-position-y: 0px; background-position-x: -240px; } } @-webkit-keyframes play2 { from { background-position-y: -48px; background-position-x: 0px; } to { background-position-y: -48px; background-position-x: -240px; } } @-webkit-keyframes play3 { from { background-position-y: -96px; background-position-x: 0px; } to { background-position-y: -96px; background-position-x: -240px; } } </code></pre>