Create a Brilliant Sprited, CSS-Powered Firefox Animation

Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The partners website also  launched with an awesome Firefox animation that I couldn't pass up the opportunity to write about -- let me show you how it was created!

Before we get to the code, let's have a look at the image:

The image is a whopping 7020x156 pixels; one large sprite. Only one HTML element is required for the animation:

<div id="foxtail"></div>

With the DIV in place, we can use some basic CSS to add a background image and dimensions:

#foxtail {
	background: url(foxtail.png) 0 0 no-repeat;
	width: 156px;
	height: 156px;
}

The last step is periodically updating the background-position of the DIV to provide the appearance of animation via the sprite.  The animation can be created with only CSS, as shared by Luke Stevenson:

@keyframes animate-tail {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}

#foxtail {
  animation: animate-tail 3.75s steps(44) infinite;
}

A beautiful work of art by Luke -- using CSS steps to move to each position! The animation can run infinitely, resetting to the original background position and starting over. In the case that you need to support older browsers, we can use a bit of jQuery and a sprite animation utility called Spritely:

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

Spritely's API allows for simple sprite animations with maximum control of speed and replay.

I could waste time saying how hot this animation is but no need -- you can already see that!  Luke's awesome contribution allows us to avoid jQuery bloat and JavaScript all together, but there's still a solution available for older browsers.