Skill Level Intermediate
And now once you have the html file open, you'll see up in the head area, we have a link to style.css. In the body area, we simply have a main element. Inside there is a figure element, and inside of the figure element is a single graphic, which is coffee_house.png. Now we'll be using this div element with an id of steam, as the container to hold the sprite sheet as the background graphic. And now if you'd like to see the layout we're going to be working with, you can open index.html in a browser. And here we can see our coffee_house.png graphic. So now to begin creating our animation, let's go back to the exercise files, and let's open up style.css in our text editor.
So now in our CSS file, let's start by targeting that div element with an id of steam. So after our figure element here, let's come down here and let's type "figure #steam", put in our brackets, we'll split this open. First property we're going to set's going to be height. We're going to set the height to 200 pixels, so 200px;. Next line we're going to set a background property. So the first property for background is color, but we're going to leave that blank.
Second property's going to be the url to the background graphic. So we'll type in url, beginning and ending parenthesis. Inside of the parentheses, let's point to the images directory '/spritesheet_steam.png'. Then outside of the parentheses, we're going to set a no-repeat, then a space, then we're going to set a 0 position on the x, space, 0 position on the y, then a semicolon. And now the next property's going to be background-size.
And this property's important, because we need to specify the actual size of the sprite sheet so that we can crop it. So the first property after background-size is the width. We're going to set this to 3000 pixels, then a space. Then for the height, we're going to set this to 100%. This way the height of the background size, will match the height of the element, which we've specified up here. This way if we want to stretch the steam, we can simply change the height property, the background size will automatically scale. So now with these properties set, we can save our CSS, go back to the browser, hit reload, and we'll now see our graphic showing up down here at the bottom.
So I'll scroll back up, let's go back to our CSS, let's add some additional properties. Next property's going to be the width. So we'll a width property to 100 pixels, and a semicolon. I'll hit save again, and go back to the browser. And now we'll just see one of those graphics from the sprite sheet showing up, since the spacing of the graphics in the sprite sheet is also 100 pixels. So again I'll scroll up to the top, let's go back to our CSS. After width, let's come in here and setup position property. So I'll type position, going to set this to absolute.
On the next line, we're going to set the bottom property to 195 pixels. I'll hit save at this point, we can now see the steam is 195 pixels from the bottom, showing up here over top of the graphic. And then back in the CSS, let's come in and set a left property, to 125 pixels. Then I'll save my CSS again, back to the browser, hit reload. And now the steam is being positioned right over top of the coffee cup, exactly where we want it. So now with our sprite sheet being cropped, and positioned over top of our graphic, now let's go back to our CSS and create some keyframes.
So after the 'figure #steam', let's come in here and type an @ symbol. Type in the word keyframes, then a space. Let's name our animation, so I'm going to call this steam_anim, for animation. Let's hit a space, let's put in some brackets. And then inside of our keyframes, let's start with a keyframe at 0%. So I'll type 0, then a percent sign, add a few spaces. Put in a beginning and ending bracket.
So at the 0% time in our animation, we're going to set a background-position. And we're going to set this to 0 pixels on the x, space, 0 pixels on the y. Now let's duplicate this line. Let's come over here and change the keyframe position to 100%. And I'll just add some spaces here so these line up. At 100%, we'll set the background-position to negative 3000 pixels, and 0 pixels on the y.
So now with these two keyframes in place, let's go back inside of our figure #steam. After the left property let's come in here and add an animation property. So 'animation: ', and then we'll specify the name of our animation, which is steam_anim, then a space. Next we're going to set the duration. For now let's set this to ten seconds, so 10s, then a space, then we'll type in the word infinite, and then a semicolon. So with this in place, let's hit save in our CSS file, and we'll now see the animation beginning to play inside of the browser.
Now we can see the animation is working, however this is not the effect that we're after. Instead of a steady animation between the two background positions, we want the animation to move to a specific point, and stop for a moment. And we can achieve this by using the steps feature of the animation property. So back in our CSS file, let's come in here and change ten seconds to 1.9s. And then before infinite, let's type in the word steps. Then let's put in a beginning and ending parenthesis. And inside we're going to specify the number of steps.
Now we have 30 frames in our sprite sheet, so we're going to put 30 inside of the parentheses. So with this in place, let's hit save. We go back to the browser and hit reload. And now we'll get the effect that we're after. We're now seeing 30 individual steps, of that 3000 pixel sprite sheet, evenly divided across 1.9 seconds. Giving us this nice fluid animation effect. And now for the final detail, back in the CSS file, lets come in here and add an opacity property. So I'll type 'opacity: .55;', save our CSS, reload in the browser, and now we'll have a nice semi transparent effect of this animated sprite sheet.
So now we have an animation created from a single web graphic, and some CSS properties. Now if you'd like to learn how I created the sprite sheet steam graphic using both After Effects and Photoshop, check out our course on creating an animated sprite sheet with After Effects, which is also available here on the library. And so with that, I'll conclude this episode, and as always, thanks for watching.