CSS Sprite-sheet animation with Multiple Row Sprite-sheet

1
votes

I am trying to play a sprite animation with css using steps like this: http://jsfiddle.net/simurai/CGmCe/

In this link he basically defines the frames like this:

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

The problem I am having is; my sprite sheet is 1309 x 910 with 30 frames. Each frame is 187 x 182. So as result, my sprite sheet is 7 frames in first 4 rows and 2 frame in the last row.

Can I do the same animation, like the animation on link above, with defining the frames myself? Or do I have to change the spritesheet and make it 1 row 30 frames (Result being 5610 x 182 sprite sheet)

1
cssanimationsprite-sheet
what about: you set up a fiddle with your sprite and try? – caramba
@caramba I tried it myself in multiple ways but whatever I do it just plays the first row and ignores the other rows. – erkinyldz
it would be easier to help if you set up a fiddle and show what you have tried. you can set more values on background-position:HERE; it's background-position:xpos ypos; (x=horizontal, y=vertical). so maybe try something like background-position:-20px -50px; and see what happens – caramba
@caramba jsfiddle.net/erkinyldz/D5r7d/1 Here is the jsfiddle link. I tested it out different things none of them worked. Left it in a working position for 1 row. Let me know if you can do the multiple row. By the way, I added the animation using jquery, but if this system can be done I'll switch it to css. – erkinyldz
Possible duplicate of CSS animations with Spritesheets in a grid image (not in a row) – Jacob Ford

1 Answers

1
votes

You need 1 row. Your example uses steps function. It use number of intervals from start to end. So if you have several rows in your sprite, height(rows) will not influence on width of one step (interval).