Hey everyone! Welcome to today’s tutorial. In today’s tutorial, we will learn how to create an animation using sprite sheet images. To animate the sprite sheet, we will use HTML and CSS. Though this is a short and quick tutorial, the results achieved are quite impressive.
If you are interested in learning CSS animation, do check out this playlist here. This playlist consists of a bunch of animation tutorials created using HTML and CSS.
Video Tutorial:
I have a video version of this tutorial, in case you would like to learn along with that, check out the video down below. Also, subscribe to my youtube channel, where I post new and exciting tutorials regularly.
Project Folder Structure:
Before we begin the coding, let us create the project folder structure. The project folder consists of an HTML document, a stylesheet and a sprite sheet image. You can find the download button for the image at the end of this tutorial. We name the HTML document index.html and stylesheet as style.css.
HTML:
We start with the HTML code. Now copy the code provided to you below and paste it into your HTML document.
The HTML consists of just a single div tag inside the document body. We add a class name container to this div.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sprite Sheet Animation</title> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"></div> </body> </html>
CSS:
Now to add styling and animating the image we use CSS. Firstly copy the code below and paste it into your stylesheet.
We start by discarding the paddings and margins from the document body. Next, we add #3168ff as the background color for the body.
Now for the container, we set the width equal to the image width. And for the height, we set it equal to Image height / Number of Frames i.e 2400/6 = 400px.
We centre the container using transforms and position absolute. Next, we use the sprite image as the background of the container. Finally, we add an animation property to the container. We set the attributes for this animation as – animation-name => kick, animation-duration => 0.5s and animation-iteration-count as infinite.
We also set the steps equal to the number of frames i.e 6. For keyframes, at 100% of the keyframe, the background-position is shifted by -3600px which is the image height. These keyframes make the frames move at a high speed thereby making them look as if they are animated.
body { padding: 0; margin: 0; background-color: #3168ff; } .container { width: 400px; height: 600px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; background: url(sprite-sheet.png); /*Steps should be equal to number of frames*/ animation: kick 0.5s steps(6) infinite; } @keyframes kick { 0% { background-position: 0 0; } /* Use height of image here as y position */ 100% { background-position: 0 -3600px; } }
That’s it for this tutorial. If you like this tutorial, don’t forget to drop your comments below. Also, all the suggestions and feedback are welcome. You can download the source code and image by clicking on the download code button below.