Time to rock some CSS3 animation! With IE 10 comes nearly full support of CSS3 animation, which means we can realistically start using it in our work. In this tutorial I am going to focus specifically on animating sprite sheets with CSS3. Let’s do this!
Before we get started, here is a demo of what we are going to make – CSS3 Sprite Animation
First thing first, we need a HTML page with a single div that links to our stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Sprite Animation</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
</head>
<body>
<div class="mario"></div>
</body>
</html>
Next, we need a sprite sheet. For this tutorial, I am using a Mario Sprite Sheet by shadefalcon on Deviant Art.
This sprite sheet rocks, but I only need some of these images and each sprite needs more spacing for my purposes. So, after a bit of Photoshoping, we end up with this (which is actually a screenshot to show the guides).
Here is the modified mario sprite sheet.
Notice that each sprite is placed in an equally sized area and the feet are all level. Now we are ready to write the CSS. First, we will place Mario in the div by adding the following to the styles.css.
.mario {
height: 60px;
width: 40px;
background: url("../images/mario-sprites.png");
}
The index.html page should now show the first Mario in the image above. Now it is time to build the animation and for now I am going to stick to the webkit prefixes for these animations.
@-webkit-keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
The code for this animation is pretty straight forward and after declaring @-webkit-keyframes we can name it whatever we want, in this case animate-mario. Since our image is 1080 pixels wide and each sprite is 40 pixels wide, we will move through 27 sprites in our image to the last Mario. Now it is time set Mario to motion by updating the CSS to look like this.
.mario {
height: 60px;
width: 40px;
background: url("../images/mario-sprites.png") ;
-webkit-animation:
animate-mario 3s 0s steps(27) infinite;
}
Here we have added the animate-mario animation to our .mario div. Stepping through the CSS animation, animate-mario will play for 2 seconds, with no delay, with 27 frames or sprites and will loop forever. Now there should be a Mario running and punching in place. If instead of infinite we use 3, the animation will play 3 times, or once if we leave it blank. Ok, so that is cool, but now lets move Mario across the screen.
@-webkit-keyframes move-mario {
0% {left: 100px }
100% {left:300px }
}
Very similar to the keyframes call above, this one uses percentages instead of from and to. As it is now they function the same way, but you will soon see why the percentages for this one. Now, we need to apply our animation to the .mario div.
.mario {
height: 60px;
width: 40px;
background: url("../images/mario-sprites.png") 0 0;
-webkit-animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
position: absolute;
left: 100px;
}
Here we have added the move-mario animation which also plays for 3 seconds, loops forever and an easing of “ease-in.” The ease-in is nice in this case since Mario is speeding into a sprint from a stand still. Also, I positioned the .mario div 100 pixels from the left to make him a little easier to see. Now we have a Mario that moves across the screen, but the animation is a bit odd since he is moving when he should be standing still. Now time for the percentages!
@-webkit-keyframes move-mario {
0% {left: 100px }
20% {left: 100px }
50% {left: 300px }
100% {left:300px }
}
This may takes some experimenting to get right, but here I have given Mario some places in the animation to stand still. Now, Mario should start standing, run and then stop before taking a swing.
The last thing to do is make sure that your cool new animation will play in as many browsers as possible. So the final CSS file should look something like this:
.mario {
height: 60px;
width: 40px;
background: url("../images/mario-sprites.png") 0 0;
-webkit-animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
-moz-animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
-ms-animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
-o-animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
animation:
animate-mario 3s 0s steps(27) infinite,
move-mario ease-in 3s 0s infinite;
position: absolute;
left: 100px;
}
@-webkit-keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
@-webkit-keyframes move-mario {
0% { left: 100px }
20% { left: 100px }
50% { left: 300px }
100% { left: 300px }
}
@-moz-keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
@-moz-keyframes move-mario {
0% { left: 100px }
20% { left: 100px }
50% { left: 300px }
100% { left: 300px }
}
@-ms-keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
@-ms-keyframes move-mario {
0% { left: 100px }
20% { left: 100px }
50% { left: 300px }
100% { left: 300px }
}
@-o-keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
@-o-keyframes move-mario {
0% { left: 100px }
20% { left: 100px }
50% { left: 300px }
100% { left: 300px }
}
@keyframes animate-mario {
from { background-position: 0 0 }
to { background-position: -1080px 0 }
}
@keyframes move-mario {
0% { left: 100px }
20% { left: 100px }
50% { left: 300px }
100% { left: 300px }
}
So that covers it! I know there are tools out there that do this sort of thing, but I do enjoy understanding how things work. If you see a better or easier way to do something or if I just screwed something up, please let me know with a comment.
The post CSS3 Animation Using Sprite Sheets appeared first on Today in Web Design.