More and more, CSS (Cascading Style Sheet language) has become a universal styling language. Invented for the web two decades ago, CSS allows you to describe styles of text, images, and other elements displayed in a web browser or LMS. Many authoring tools expose the CSS they create so that a developer may make custom changes to the appearance and/or layout of content.
In this short tutorial, we’ll be using the latest CSS iteration—CSS3. CSS3 added a number of features to the developers’ toolkit including animation. Tools such as Captivate, Adobe Animate, and others all write the type of code we’ll be examining.
Assets
In this tutorial, we’re actually going to create two separate animations—one superimposed over the other. The first animation is going to be a background image that will slowly scroll toward the left to give the illusion of movement. We’re going to use the graphic in Figure 1.
Figure 1: This cartoon city will serve as the background of our animation. It will be animated as well. You may download this image here.
The second image used in our animation is a special type of image known as a sprite sheet. A sprite sheet typically displays one or more images in several stages of movement. The sprite sheet we’re using displays a cartoon character walking in six separate images. (Figure 2)
Figure 2: This sprite sheet displays a character in what’s known as a walk cycle. The images are repeated in rapid succession to give the appearance of walking. You may download this image here.
Once you have these two images, save them in a blank folder. In that same folder start a new text document called “index.html”. This is where we’re going to write the HTML and CSS code to make the animation happen. (Figure 3)
Figure 3: All files needed, ready for development
Writing the code: The background
Now we’re going to set up our HTML document by adding the usual HTML document structure. Add the following code (Snippet 1) to your “index.html” file with a text editor. Remember that a text editor is not a word processor. A text editor keeps your text “pure” without introducing invisible formatting characters that would confuse a web browser.
<!DOCTYPE html> <html> <head> <title>Animation</title> </head> <body> </body> </html>
Now that we have the structure of our HTML document, we can go ahead and add placeholders in the body section for our images. After the opening body tag, add the code in Snippet 2.
<body> <div id="background"></div> <div id="sprite"></div> </body>
We’ve added two logical divisions. These are simply placeholders in our code for the background graphic and the sprite. Let’s get our background graphic scrolling first to add the illusion of movement.
The background graphic should fill the web browser and slowly scroll to the left. We won’t be able to see the entire graphic all at once, and it should loop back to the left side of the image when we reach the end.
We’re going to accomplish this with CSS, so we’ll need a place to place the CSS in our code. CSS is usually found within <style> tags, so we’ll add those next. We’re going to be working in the head section of the document. Place your <style> tags as I’ve shown in Snippet 3.
<head> <title>Animation</title> <style> </style> </head>
We’re going to place our CSS code between the opening and closing style tag. First, a little housekeeping. Your browser, where we’ll view the animation, by default places a three-pixel margin around the edges. Let’s get rid of that by adding our first style inside the <style> tags. (Snippet 4)
<style> body{ margin: 0; } </style>
This little bit of code eliminates the margin mentioned above. Don’t worry too much about getting the indents exactly right. They have no actual function except to make the code easier to read by us humans!
Now we’ll add the code that performs the actual animation. Key this in carefully. Make sure you’re right below the first CSS rule we created for the body. (Snippet 5)
#background{ background-image: url(background.jpg); width: 100%; height: 2133px; z-index: -1; animation: back 20s infinite; animation-timing-function: linear; } @keyframes back { 100%{ background-position: -3067px 0; } }
This code defines the size of the background and the image we’re using. It then assigns a z-index, which determines where the image will be in the stack. Since we assigned a z-index of -1, the background image will appear below the other images and therefore images placed on top of it will be visible.
The next lines of code define exactly how the animation will work. We set the animation to be 20 seconds long and to play infinitely. Since this isn’t a sprite sheet, we need only a single keyframe. I measured the image size using Photoshop. (Figure 4)
Figure 4: Measuring the size of an image using Photoshop. This image is 3067 pixels wide.
This is a good point to check if everything is working correctly. Load the file index.html into your browser using File —> Open in the browser and you should see the background animation scrolling. I’ve posted a short video of what the animation should look like at this point at https://www.loom.com/share/d0e04a6e7e1242df91ebf04023f699a3. Depending on your screen size you may need to zoom out a bit to see everything.
Animating the character
Now let’s add the walk cycle to our animation. The purpose of this code is to display the sprite, one image at a time, in rapid succession to give the illusion of walking.
The sprite image is essentially six images in one, each showing a single state in the “walk” of the animated character. In Photoshop I determined that each image is 256px high by 256px wide. (Figure 5)
Figure 5: There are six images in the walk cycle. Each image is 256px by 256px.
Now let’s code the walk. Make sure you’re still placing your code inside the <style> tags. (Snippet 6)
#sprite{ position: absolute; top: 550px; left: 300px; width: 256px; height: 256px; background-image: url(walk.png); animation: sprite .6s steps(6) infinite; z-index: 1; } @keyframes sprite { 100%{ background-position: -1536px 0; } }
This is different from the first animation, as we had to provide information about our sprite sheet with the steps rule in the animation.
If everything is correct, we should now see the complete animation when we test the code by loading the index.html file in a browser. (Figure 6) If you don’t, review your code carefully for errors.
Figure 6: The character is now walking with the background image scrolling in the background. Notice the timing makes the animation effect seem more real.
You can view a video of the animation at https://www.loom.com/share/5cb62b1f76d84bec8f748b40e431154b.
No animation is complete without music, so let’s add some as our finishing touch.
Adding music: The finishing touch
This animation obviously needs some silly cartoon music. You may download the music I used here, however, any mp3 file will work.
Make sure your mp3 file is in the same folder as the other three files. We’re going to add the audio below the <div> tags in the <body> section of the code. (Snippet 7)
<iframe src="music.mp3" allow="autoplay" style="display:none;" id="iframeAudio"></iframe>
When you test again by loading the index.html file into the browser you should hear the silly music as your character walks through the cartoon world.
For your reference, here’s the complete code for our animation app (Snippet 8)
<!DOCTYPE html> <html> <head> <title>Animation</title> <style> body{ margin: 0; } #background{ background-image: url(background.jpg); width: 100%; height: 2133px; z-index: -1; animation: back 20s infinite; animation-timing-function: linear; } @keyframes back { 100%{ background-position: -3067px 0; } } #sprite{ position: absolute; top: 550px; left: 300px; width: 256px; height: 256px; background-image: url(walk.png); animation: sprite .6s steps(6) infinite; z-index: 1; } @keyframes sprite { 100%{ background-position: -1536px 0; } } </style> </head> <body> <div id="background"></div> <div id="sprite"></div> <iframe src="music.mp3" allow="autoplay" style="display:none;" id="iframeAudio"></iframe> </body> </html>
If you wish to download the entire app you may do so at my Github location. Once you download, click the “Clone or Download” button and then “Download Zip”.
Have fun animating!