- [Chris] Hi, this is Chris Converse,
and in this episode we'll use CSS keyframes
to animate a background image
resulting in a seamlessly looping animation.
So, if you'd like to follow along with me,
download the exercise files
and we'll begin by opening the HTML file in a text editor.
So, once you have the HTML file open,
down in the body area you'll see
we have a figure element here.
Inside of the figure element is an image element,
and this links to harbor.png.
This is the semi transparent graphic
down here at the bottom.
We also have a link in the head area to style.css.
Now, to create the animation
let's go back to the exercise files.
Let's find that style.css file.
Let's open that in our text editor.
Now, let's scroll down.
First thing we're going to do
is add a background graphic to that figure element.
So, let's find the figure selector here.
After overflow: hidden let's hit a Return.
Let's come in here and add a background property.
So, after background:
we'll specify an image, so url,
put in our parentheses.
Let's go into the images directory /clouds_tile.jpg
and a semicolon.
Now, with our clouds in the background
now we're going to create some keyframes for the animation.
So, we'll start with an @ symbol keyframes then a space.
Now we're going to name our keyframes.
So, we'll call this clouds_anim for clouds animation,
and a space, add some curly brackets.
Now, inside of the keyframe's brackets
we're going to set our first keyframe at the 0% mark.
So, I'll type 0%, then a few spaces, put in our brackets.
Then we're going to come in here
and set a background-position.
We're going to set the background-position
to 0 on the X and 0 on the Y, then a semicolon.
Let's duplicate this line.
Let's come in here and change the keyframe to the 100% mark.
Space this out a little bit.
Let's come in here and set the background-position on the X
to negative 2,212 pixels, so negative 2-1-2-2.
That's the full width of the JPEG file of the clouds.
Put in a px, then a space, then zero.
So with this in place we can hit Save.
We see the background clouds.
We also have our keyframes defined.
So, now what we need to do
is assign this keyframe animation to the figure element.
So, let's get our cursor after the background property
inside of figure.
Let's hit a Return.
Let's type in animation:
and for the animation value
we're first going to set the name of our keyframes.
So, I'll type clouds_anim and a space.
We're going to make this take 75 seconds, so 75s, then a space.
The type of animation is going to be linear.
Add another space.
And then we want this to continuously loop,
so we're going to use the infinite property.
So, I'll type infinite then a semicolon.
With these in place we'll save our CSS again,
go back to the browser,
and we'll now see that we have our clouds animating
in the background.
And so if you'd like to see additional courses
that deal with CSS animation,
check out animating a sprite sheet with CSS
or looping a CSS animation.
Both are available here in the library
in the course entitled Creating Web Media.
And so with that I'll conclude this episode,
and as always, thanks for watching.