CSS3 sprite animations


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:

Code: (css)
.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!