CSS Sprite-sheet animation with Multiple Row Sprite-sheet

Question

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)

Answer 1

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).