Viewers: in countries Watching now:
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
In our last tutorial, we took a whole series of images and put them together in one big sprite image. Now in this tutorial, we're going to use that as the basis of our animation, and we're also going to look at the one remaining timing function we haven't talked about yet, and that's steps. We'll be using the sprite image we created in the last tutorial, or you can use the one in the Exercise File folder from this tutorial to start with. And we'll use that image as a source for our animation. At the end of this tutorial, we'll have our sprite image moving like a frame-by-frame animation in our browser. Steps is one of the options we have for our animation-timing-function, and it's one we haven't talked about too much yet.
It's the odd one out, because it works a little differently than the rest. The syntax for steps also looks a bit different. For the animation-timing-function, you type out steps, and then in brackets you list the number of steps you'd like to have, which looks a lot different than the previous animation-timing-functions we've looked at. Steps divides the animation duration into equal parts based on the number of steps you define so that's why you have to give it that number. Each of these steps is like a snapshot or a frame of your animation. It then cycles through each snapshot or frame for the duration of your animation.
So instead of continuous motion, your animation is divided into a series of holds. Whether you're working from the sprite image you created in the last tutorial or the one included in the exercise files here, we have our image all ready to go, so let's get it in motion. We'll go into Coda and look at our basic HTML. It's very simple, as you probably expect. All we really have in there is one div with the class of sprite, and we'll use this class to assign a background image and create our animation. If we take a look at our starting CSS files, we have some properties for our sprite class, basically width and height, and our background image is set to our sprite image.
However, if we go to our browser and preview this right now, we just have a static image of the first frame of our animation. That's a good start, but we need to get it in motion. Just like the other timing-functions, steps works off a list of keyframes to define your animation. So let's go back to Coda to define those keyframes. We'll create a keyframes block. I'm going to name this animation walker, since that's essentially what he's doing. We'll start with the 0% keyframe setting our background position to 0, 0.
This is essentially what we have right now, and you'll see our 0% keyframe looks an awful a lot like the background property in our sprite class above. Then we'll add a 100% keyframe, setting our background position to 0 and -4000. If you remember from the last tutorial, or you've taken a look at the image we're working with, you'll notice that our image is 4000 pixels tall. So essentially what we're doing with this keyframe animation is moving the image all the way across its height. So the background position of your 100% keyframe needs to be equal to the height of your image, and it also needs to be negative because we want the image to move up.
As our sprite image moves up, frames lower in the image will begin to be shown, and that's how we'll kind of get this filmstrip style or sprite sheet style animation. So with our keyframes all set to go, let's apply our animation to our sprite class. We'll start by adding our animation property, and we'll assign the animation of walker, which are the keyframes that we just created. We'll have this animation take 2 seconds, which is a duration I just kind of made up myself for right now. And then for our timing-function, we'll use steps here. So we'll write steps, and then in brackets we're going to include the number 10.
The reason that I'm, including 10 here, because I know in my sprite image I combine 10 frames or 10 separate images to make my sprite image. So my sprite image has 10 steps to it or 10 frames in it. If you created a different sprite image that had more frames or less frames, you'd want to adjust this number, and as well as the background position in our keyframes to reflect the size and number of frames in the sprite that you are using. And as one last thing, we will set our animation iteration count to infinite. Luckily, I know the images I've been provided is actually a repeating walk cycle, so I can infinitely repeat this animation, and it will loop smoothly.
That's going to depend on the actual images in your sprite. So some may or may not be created to loop infinitely. Let's save this and preview our animation now. So we head back to our browser and refresh. Now we see our animation moving. And really what we're doing is just animating a background image going up not smoothly but in 10 steps to show us each of the 10 frames. Notice how each frame is shown with no transition or easing in between. It's just a hard cut to the next frame. The smoothness of the animation is a result of how closely each frame was drawn to the one before it, and the tendency of our eyes and brain to want to make things appear to be moving smoothly.
So it's a pretty neat effect. If you're not entirely happy with the way your animation looks, we can make some adjustments in the CSS to change the overall appearance of your animation. If we go back to our CSS in Coda, we can do something like change the duration of our animation and have the walk cycle look entirely differently. For example, if we set the duration to 1 second instead of 2 and then preview our animation, you can see he's walking twice as fast. If we want to exaggerate that even more, we can maybe set the duration to .5 seconds and go back to our browser and really have him running.
But notice that no matter what, the same number of steps is happening, and we're just making them happen faster because they're working over a shorter duration. This technique is perfect for adding little snippets of traditionally drawn animations to a website or app. It's often used with animated characters like this one, but with just a little imagination you can use the same technique for reusable transitions between images, maybe a countdown clock or other things that have a lot of illustrated and repetitive movements. So it's a great CSS animation technique to be familiar with.
There are currently no FAQs about CSS: Animations.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.