This is the old version of the tutorial. Please visit the new version at:
How to create Responsive Retina CSS sprites
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:
Follow these easy steps if you want to create a hover animation like for example a download button or a navigation image
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
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.
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!