CSS animation examples with TexturePacker

Kerstin Mueller

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 spritesheets 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

1. 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.

2. Set the destination of your data and texture file.

3. Optional: set additional parameters. For example png optimization, jpg compression or image dithering to reduce file size.

4. Click Publish sprite sheet.

TexturePacker will publish a spritesheet image 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"></span> into your HTML where you want the image to appear. Replace think with your sprite name.

That's all!

Example 2: Animation with @keyframes and steps()

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

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.

  1. 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.
  2. Set all Paddings to "0".
  3. 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...)
  4. Publish your spritesheet to your desired destination. You can discard the .css output.
TexturePacker Spritesheet 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"></div>

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

Read the complete specification of @keyframes selector on w3.org
Be aware that the @keyframe selector is classified as "Work in Progress" and may change at any time!

Did you like the tutorial? Please share!