CSS animation examples with TexturePacker

This is the old version of the tutorial. Please visit the new version at:
How to create Responsive Retina CSS sprites

What you are going to learn:

Creating a css sprite sheet
Creating hover animations
Playing animations from css

Do you want to have a nice hover animation on your webpage?

Let TexturePacker do the work and just include the spritesheet and css output in your site!

Advantages of css sprite sheets over individual images include:

reduce the amount of HTTP requests by fetching only one image rather than many
no JavaScript code to maintain animations or preload images
maximize browser compatibility
avoid flickering when a button changes state

Example 1: Simple hover animation

Follow these easy steps if you want to create a hover animation like for example a download button or a navigation image

TexturePacker CSS Animate Sprites Screenshot

Open TexturePacker, choose CSS as framework for your project and put in your sprites: Either drop your sprites individually or simply drop the whole folder containing all your sprites you want to have on the spritesheet.

Note: you should follow the convention of naming your corresponding images like this: image for the display image and image-hover for the hover image. By naming your images like this, the TexturePacker CSS exporter automatically creates a css file with an image class and an image:hover class, so you don't have to do anything but include it into your page's css and use it on your page.

Set the destination of your data and texture file.
Optional: set additional parameters. For example png optimization, jpg compression or image dithering to reduce file size.
Click Publish sprite sheet .

TexturePacker will publish a sprite sheet, and a css file like this:

/* -created with http://www.codeandweb.com/texturepacker- */
.sprite {
    display:inline-block; overflow:hidden; background-repeat:no-repeat;
    background-image:url("/path/to/spritesheet.png");
}
.download {
    width:80px; height:32px; background-position: -0px -273px
}    
.download:hover {
    width:80px; height:32px; background-position: -80px -273px
}
.think {
    width:123px; height:273px; background-position: -0px -0px
}
.think:hover {
    width:123px; height:273px; background-position: -123px -0px
}

All you have to do now is put this css into your page's internal css or include it along with your other external css files.

Now place <span class="sprite think"/> into your HTML where you want the image to appear. Replace think with your sprite name.

That's all!

<--- hover over this image to see the animation

Example 2: Animation with @keyframes and steps()

Simple animations in CSS have some benefits over animations in JavaScript:

They're easy to use: you don't even have to know JavaScript.
The animation runs smoothly, even under moderate system load.

If you want to have an animation on your page that consists of more than two frames here is a way to include it into your page without using JavaScript!

You don't need the css output for this, but nonetheless it can be quite useful to have TexturePacker create your spritesheet:

Use TexturePacker's "Common factor" feature to have all your sprites in a grid of constant size.

Set "Common factor" to the size of your largest sprite, in our case with the walking capguy it is 184 for x and 325 for y value.
Set all Paddings to "0".
Set "Algorithm" to Basic and sort by name ascending. This way all your sprites are in the correct order (assuming you named them with numeric endings like we do with animation frames...)
Publish your sprite sheet to your desired destination. You can discard the .css output.

TexturePacker Sprite sheet output animation frames

Above you can see all 8 frames of our walking capguy aligned neatly in one row.

Now, include the following code into your page's CSS:

@-webkit-keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1472px; }  /* <-- width of spritesheet*/
}

@-moz-keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1472px; } /* <-- width of spritesheet*/
}

@-o-keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1472px; } /* <-- width of spritesheet*/
}

@keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1472px; } /* <-- width of spritesheet*/
}

.capguy {
    width: 184px; height: 325px; /* <--  size of a single frame*/
    background-image: url("/path/to/capguy-walk.png"); /* <-- url to spritesheet*/
    margin: 0 auto;    
    -webkit-animation: walk 1s steps(8) infinite; 
    -moz-animation: walk 1s steps(8) infinite;
    -o-animation: walk 1s steps(8) infinite;
    animation: walk 1s steps(8) infinite; /* <-- animation parameters, see below*/
}

You can render your animation more precisely using animation:

<name> <duration of one frame in seconds> steps( <number of frames> ) <duration of complete animation>

Now place the following line of code in your page where you want the animation to play:

<div class="capguy"/>

Replace capguy with your sprite class name, set your correct background-image url, and you're done!