CODEWITHSUNDEEP
csskeyframe
Ekim
Ekim

Reputation: 1105

looping a CSS3 animation with multiple keyframes

I managed to make multiple key-frames in an animation play one after another

http://jsfiddle.net/NuMjW/

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.

.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; } }

Upvotes: 0

Views: 1418

Answers (1)

Ekim
Ekim

Reputation: 1105

figured it out myself have to merge the animation into one block use short time otherwise the scrolling of the background is visible between rows.

<style>
.hi {
    width: 48px;
    height: 48px;
    background-image: url("warp.png");

    -webkit-animation: play1 1s 0s steps(5) infinite;
}

@-webkit-keyframes play1 {
   from { background-position-y:    0px; background-position-x:    0px; }
     33% { background-position-y:    0px; background-position-x: -240px; }
     33.0001% { background-position-y:  -48px; background-position-x:    0px; }
     66% { background-position-y:  -48px; background-position-x: -240px; }
     66.0001% { background-position-y:  -96px; background-position-x:    0px; }
     100% { background-position-y:  -96px; background-position-x: -240px; }
}    

</style>

<body>

<img src="warp.png" />
<br><br>
<div class="hi"></div>

</body>

Upvotes: 1

Related Questions