CSS3 animations seem to be all about fluid transitions from some value to another. But when using a sprite map with fixed positioned images, that's quite useless. Luckily the workgroup also gave us a way of using animations with a sprite map. It's called stepping, and you seem to have two or three functions available...
Here's a simple example:
.animate {
-webkit-animation-timing-function: step-start;
-webkit-animation-duration: 0.4s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'some_name' {
33% { background-position: -748px -34px; }
66% { background-position: -765px -34px; }
100% { background-position: -282px -34px; }
}
.another_name {
-webkit-animation-name: 'some_name';
width: 16px;
height: 16px;
background-image: url(sprite.png);
background-position: -748px -34px; /* poster sprite for browsers that dont support this animation */
}
<div class="animate another_name"></div>
As you can see it's quite some boiler plate, but whatever. Most important about this example is the name of the timing function in
.animate:
step-start. There's also
step-end, I'm not certain what the difference is between them. Documentation of these functions are very bad at the time of writing.
I got this information myself from
this blog post by
Paul Bakaus. Have a look at the
demo page that belongs to that blog post for the examples at work.
Hope it helps you!