From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Animate a sprite sheet

Animate a sprite sheet - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Animate a sprite sheet

“

- [Instructor] Hi, this is Chris Converse and in this episode we'll create an animation from static frames in a single graphic file known as a sprite sheet. Using CSS keyframes, we'll move the graphic within an HTML element to create the effect of motion. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. And so once you have the HTML file open, up in the head area we have a link to style.css, which we'll open in a moment. And inside of the body area we have an article element. Inside the article element we have a figure. Inside of the figure there's a div with a class of exhaust. And that's this graphic here, which is showing just one of the frames from the 30 frames in that sprite sheet. Then inside of the figure element after the div with the class of exhaust, we have an image of the rocket. And then we have all of our content. So to create our animation, let's go back to the exercise files. Let's find style.css.…

Contents