How: have more than one CSS sprite on a page - css

Question

So I found this
http://jsfiddle.net/simurai/CGmCe/
The code is easy enough and I was able to integrate into a page of mine. However when I go to make a 2nd animated sprite on the same page, it doesn't work because it seems that the code
-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
applies globally to all css animations and not specifically to the div labeled "hi"
It's really the TO position that needs to change per ID, any thoughts on how to put more than one?

Answer 1

When you use
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
you create a set of keyframes called play. The text after #keyframes is an identifier; in this case 'play' is just the name for this configuration. Then for an element you tell it what animation to use, and in your case you tell it to use the play set of frames.
In your fiddle your .hi element has the following animation:
animation: play .8s steps(10) infinite;
And here 'play' is just the identifier that is declared for the keyframes, and not a command to run the animation.
If you want to have more than 1 different animation, the way to go would be to use 2 different animations, and give them different identifiers (i.e. 'play' and 'animation2' or whatever).
For example, using the same sprite in your example:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
<div class="bye"></div>
And the CSS (note that I'm not using all the possible browser prefixes, and the animations are called longwave and shortwave):
.hi {
width: 50px;
height: 72px; border: 1px dashed red;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: longwave .8s steps(10) infinite;
animation: longwave .8s steps(10) infinite;
}
.bye {width: 50px; height: 72px; border: 1px dashed magenta;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: shortwave .8s steps(5) infinite;
}
#-webkit-keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-webkit-keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
#keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
W3C spec. documents for animations (CSS Animations Module Level 3, Section 2)
More details in Mozilla's Developer Network animation totorial

Answer 2

Do you mean to control the animation separately for each object?
http://jsfiddle.net/CGmCe/1738/
If so, just create separate IDs for other DIVs
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
}
#hi1 {
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#hi2 {
-webkit-animation: play .4s steps(10) infinite;
-moz-animation: play .4s steps(10) infinite;
-ms-animation: play .4s steps(10) infinite;
-o-animation: play .4s steps(10) infinite;
animation: play .4s steps(10) infinite;
}
And HTML:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi" id="hi1"></div>
<div class="hi" id="hi2"></div>