Start learning with our library of video tutorials taught by experts. Get started

Web Motion for Beginners: Animate a CSS Sprite Sheet

Web Motion for Beginners: Animate a CSS Sprite Sheet

with Tom Green

Video: Project overview and plan

I've spent a bit of time talking about how motion To get yourself started, open the code editor, I'm If you want to add more complex motion or And you can see, it really doesn't change much other You've just created a very basic CSS animation, which requires a set Now this is a handy property because you Two.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Motion for Beginners: Animate a CSS Sprite Sheet
30m 25s Beginner Jan 30, 2014

Viewers: in countries Watching now:

CSS sprite sheets have opened up another door for web motion, allowing you to efficiently animate a series of images—anything from button states to character poses. In this quick course, Tom Green shows you how to animate a character's walk cycle by creating a sprite sheet in Flash, editing in Fireworks, and putting it into motion (and into your HTML) with Edge Animate.

Subjects:
3D + Animation Video Motion Graphics Web Interaction Design Web Design Projects
Software:
Fireworks Flash Professional Photoshop Edge Animate
Author:
Tom Green

Project overview and plan

I've spent a bit of time talking about how motion on the web is simply moving stuff from here to there. In this exercise, you're going to see exactly what I've been talking about, as you use CSS 3 code to move this little patch from one side of the screen to the other, and we're going to wind up by moving it back again. I want to start with this because it is important for you to understand just how stuff moves in the browser. Though you can use tools like Edge Animate or Google Web Designer to visually put objects in motion, these tools will still write the CSS 3 code that makes the motion possible.

And it is important that you be exposed to it in order to appreciate what these tools do in the background for you. Before we start, a word of warning. The CSS 3 standard is so new, it still hasn't achieved broad acceptance among the browsers out there. It works in many of the modern browsers that use HTML 5, but if your browser isn't HTML 5-compliant, nothing will work. With that out of the way, let's see how stuff moves from here to there. To get yourself started, open the code editor, I'm using Coda 2 here but any code editor will do.

When the editor launches, navigate to the index.html file and in the Here to There folder found in your exercise folder. And when the file opens, preview it in a browser. The plan as I said is to move the patch from the left side of the page to the right side of the page. Back in our editor, I need to scroll down to the bottom here and pay attention to this line right here. As I mentioned earlier, CSS 3 is still relatively new, and vendor prefixes pop up in CSS 3 code like weeds in your garden.

This small minified script uses Java Script to handle the management of vendor prefixes, which I promise you will make your life easier. As you can see, all there is on this page is an image that has the class of patch. You can use any word you want, but anything to be moved with CSS 3 is going to need to be associated with a class. Scroll up to line 14 right under the Animation CSS Goes Here. And let's add some properties to our patch class. So we'll start with .patch. Curly brace, curly brace.

The first property we're going to add is a name for our animation. So enter animation-name:moveit;. In the next property we're going to add is the duration. In other words, how long this thing will play. Animation I'm going to select it right here, and it will be two seconds. I settled on two seconds but feel free to change it. These are the two fundamental CSS 3 animation properties.

If you don't have a name property, the browser won't have a clue what to do. If you don't have a duration, the default value of zero will be applied and our patch will just sit there. Now that we have the properties, we need to identify the keyframes for the motion. And what you need to do is, click once on the outside of the closing curly brace for the patch. And we're going to add a rule, @keyframesmoveIt{}. And, now we can start identifying the keyframes.

The keyframes rule is where the magic happens, because all animations occurs between keyframes. To do that, we move into rather familiar territory, because the keyframes used to move objects move them from here to there. To set the first keyframe, enter from curly brace transform, translate x zero, semi-colon, curly brace. What this does is to use the CSS Transform method to move or translate our patch to the zero point on the page. Now that we've got that in, let's enter the next line. Press the Return/Enter key and enter to transform:translateX(600px), close the bracket, semicolon, and there we go. And what this line does is move the patch 600 pixels to the right.

That's what translate x means. Move it on the x axis 600 pixels. So let's take a look at what that does. Preview, and there goes our little patch across the page. If you want to add more complex motion or changes to the variety of keyframes, this is easily accomplished. All you need to do is change the from, and to points to 0% and 100%, just like this. From 0%, that's the start, 0% on the timeline to 100%, which is 600 pixels out.

And you can add 50, 25, 33, 46% values and have things happen at those points. So let's make that change and test it again. And you can see, it really doesn't change much other than make it easier for you to find the key frames. You've just created a very basic CSS animation, which requires a set of defined key frames, a name for the animation, and its duration. We really should stay pro here, so we need to determine how many times the animation plays and add the all-important slow in, slow out easings.

Let's add the easing roll first and that goes in the patch. So press the Return key after the animation duration, and enter the following patch rule. Animation-timing-function and ease-out;. There are two other values you can use, ease-in and ease-in-out. Now let's test this and see if the patch gently slides into place, and it does.

Let's return to the code and instead of having the animation play once, let's have it play twice. Press the Return key enter and add animation, iteration count and we'll have this play twice. Now this is a handy property because you get to determine how often the animation plays. If you want it to continuously loop, replace the number two with the word infinite. So let's take a look and see if this works. Click preview. One. Two. Back to the code. Another property needs to be added.

Did you notice how the patch pops back to its start position, over on the left when the animation finishes? Let's hold the patch in place when the animation finishes. This is where the animation fill mode property comes into play. Press the Return/Enter key and enter Animation-fill-mode:forwards;. If you test it the patch will play twice and then stay put on the last keyframe.

There are four possible values you can use here, none, backwards, forwards, or both. Finally, let's have the patch move to the right and then reverse course back to its start position. Press the Return/Enter key, and add animation-direction:alternate. Now this property has four values, normal, which would be a left to right motion, reverse, it moves from right to left, alternate, this is tied to the duration property.

On the first pass it moves left to right, and on the second, moves right to left. Alternate-reverse, the exact opposite of the previous property, but it to is tied to the duration property. So let's take a look at if this works. Click Preview. There it goes, and it goes back and stays put. So there's Alternate. So there you have it. Using CSS3 to move stuff from here to there. Finally, this stuff is new. And vendor prefixes are a must have when you write the code. I used a small JavaScript provided by Lea Verou and you can pick it up at http://leaverou.github.io/prefixfree and I strongly suggest you pick up a copy.

Even though this was a very basic overview, you should now have a sense of what goes on when you move stuff around in Animate or any other visual editor. There's a lot more you can do with CSS animation, but this should get you going.

There are currently no FAQs about Web Motion for Beginners: Animate a CSS Sprite Sheet.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Web Motion for Beginners: Animate a CSS Sprite Sheet.

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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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