CSS animation examples with TexturePacker
How to create Responsive Retina CSS sprites
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
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.
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:
- 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 spritesheet to your desired destination. You can discard the .css output.
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!