Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating the sprite image with steps

From: CSS: Animations

Video: Animating the sprite image with steps

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.

Animating the sprite image with steps

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.

Show transcript

This video is part of

Image for CSS: Animations
CSS: Animations

29 video lessons · 12760 viewers

Val Head
Author

 
Expand all | Collapse all
  1. 4m 47s
    1. Welcome
      41s
    2. What you should know before watching this course
      58s
    3. Vendor prefixes and browser support
      2m 11s
    4. Using the exercise files
      57s
  2. 28m 16s
    1. Animation basics
      6m 32s
    2. Exploring animation delay and the fill-mode property
      6m 6s
    3. Working with animation direction
      4m 49s
    4. Understanding easing
      8m 47s
    5. Challenge: Adding keyframes to our animation
      49s
    6. Solution: Adding keyframes to our animation
      1m 13s
  3. 47m 37s
    1. Creating a seamlessly looping animation
      6m 27s
    2. Animating an element into place
      5m 43s
    3. Playing and pausing an animation on hover
      6m 20s
    4. Animating 3D transforms
      8m 6s
    5. Preparing a sprite image for animation
      4m 55s
    6. Animating the sprite image with steps
      5m 34s
    7. Chaining multiple animations on one element
      8m 2s
    8. Challenge: Adding a third animation to the chain
      46s
    9. Solution: Adding a third animation to the chain
      1m 44s
  4. 19m 54s
    1. A preview of what we'll be creating
      1m 10s
    2. Setting up the HTML structure
      1m 48s
    3. Adding the header animation
      5m 57s
    4. Animating the data
      6m 8s
    5. Adding interactivity with JavaScript
      4m 51s
  5. 12m 44s
    1. Why and when to use CSS animations
      4m 50s
    2. Organizing animation code for semantics and fallbacks
      4m 51s
    3. Crafting effective animations
      3m 3s
  6. 3m 0s
    1. Helpful online tools for creating and building animations
      3m 0s
  7. 24s
    1. Next steps
      24s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Animations.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.