1
00:00:02.02 --> 00:00:03.02
- [Chris] Hi, this is Chris Converse,

2
00:00:03.02 --> 00:00:05.08
and in this episode
we'll use CSS keyframes

3
00:00:05.08 --> 00:00:07.05
to animate a background image

4
00:00:07.05 --> 00:00:10.05
resulting in a seamlessly
looping animation.

5
00:00:10.05 --> 00:00:12.01
So, if you'd like to follow along with me,

6
00:00:12.01 --> 00:00:13.05
download the exercise files

7
00:00:13.05 --> 00:00:18.07
and we'll begin by opening the
HTML file in a text editor.

8
00:00:18.07 --> 00:00:20.09
So, once you have the HTML file open,

9
00:00:20.09 --> 00:00:22.02
down in the body area you'll see

10
00:00:22.02 --> 00:00:24.01
we have a figure element here.

11
00:00:24.01 --> 00:00:27.04
Inside of the figure
element is an image element,

12
00:00:27.04 --> 00:00:29.03
and this links to harbor.png.

13
00:00:29.03 --> 00:00:31.02
This is the semi transparent graphic

14
00:00:31.02 --> 00:00:33.07
down here at the bottom.

15
00:00:33.07 --> 00:00:39.09
We also have a link in the
head area to style.css.

16
00:00:39.09 --> 00:00:40.08
Now, to create the animation

17
00:00:40.08 --> 00:00:43.01
let's go back to the exercise files.

18
00:00:43.01 --> 00:00:45.05
Let's find that style.css file.

19
00:00:45.05 --> 00:00:48.01
Let's open that in our text editor.

20
00:00:48.01 --> 00:00:49.07
Now, let's scroll down.

21
00:00:49.07 --> 00:00:50.08
First thing we're going to do

22
00:00:50.08 --> 00:00:54.03
is add a background graphic
to that figure element.

23
00:00:54.03 --> 00:00:56.07
So, let's find the figure selector here.

24
00:00:56.07 --> 00:01:00.00
After overflow: hidden let's hit a Return.

25
00:01:00.00 --> 00:01:03.03
Let's come in here and
add a background property.

26
00:01:03.03 --> 00:01:05.09
So, after background:

27
00:01:05.09 --> 00:01:08.07
we'll specify an image, so url,

28
00:01:08.07 --> 00:01:11.02
put in our parentheses.

29
00:01:11.02 --> 00:01:19.07
Let's go into the images
directory /clouds_tile.jpg

30
00:01:19.07 --> 00:01:23.04
and a semicolon.

31
00:01:23.04 --> 00:01:25.04
Now, with our clouds in the background

32
00:01:25.04 --> 00:01:28.06
now we're going to create some
keyframes for the animation.

33
00:01:28.06 --> 00:01:34.05
So, we'll start with an @
symbol keyframes then a space.

34
00:01:34.05 --> 00:01:37.08
Now we're going to name our keyframes.

35
00:01:37.08 --> 00:01:43.01
So, we'll call this clouds_anim
for clouds animation,

36
00:01:43.01 --> 00:01:47.03
and a space, add some curly brackets.

37
00:01:47.03 --> 00:01:49.04
Now, inside of the keyframe's brackets

38
00:01:49.04 --> 00:01:52.09
we're going to set our first
keyframe at the 0% mark.

39
00:01:52.09 --> 00:01:59.05
So, I'll type 0%, then a few
spaces, put in our brackets.

40
00:01:59.05 --> 00:02:00.04
Then we're going to come in here

41
00:02:00.04 --> 00:02:03.04
and set a background-position.

42
00:02:03.04 --> 00:02:04.03
We're going to set the background-position

43
00:02:04.03 --> 00:02:09.03
to 0 on the X and 0 on
the Y, then a semicolon.

44
00:02:09.03 --> 00:02:12.01
Let's duplicate this line.

45
00:02:12.01 --> 00:02:18.07
Let's come in here and change
the keyframe to the 100% mark.

46
00:02:18.07 --> 00:02:20.07
Space this out a little bit.

47
00:02:20.07 --> 00:02:23.05
Let's come in here and set the
background-position on the X

48
00:02:23.05 --> 00:02:29.02
to negative 2,212 pixels,
so negative 2-1-2-2.

49
00:02:29.02 --> 00:02:33.08
That's the full width of
the JPEG file of the clouds.

50
00:02:33.08 --> 00:02:37.07
Put in a px, then a space, then zero.

51
00:02:37.07 --> 00:02:39.08
So with this in place we can hit Save.

52
00:02:39.08 --> 00:02:40.09
We see the background clouds.

53
00:02:40.09 --> 00:02:43.01
We also have our keyframes defined.

54
00:02:43.01 --> 00:02:44.02
So, now what we need to do

55
00:02:44.02 --> 00:02:48.07
is assign this keyframe
animation to the figure element.

56
00:02:48.07 --> 00:02:50.08
So, let's get our cursor
after the background property

57
00:02:50.08 --> 00:02:52.02
inside of figure.

58
00:02:52.02 --> 00:02:54.08
Let's hit a Return.

59
00:02:54.08 --> 00:02:58.03
Let's type in animation:

60
00:02:58.03 --> 00:02:59.07
and for the animation value

61
00:02:59.07 --> 00:03:02.09
we're first going to set
the name of our keyframes.

62
00:03:02.09 --> 00:03:08.06
So, I'll type clouds_anim and a space.

63
00:03:08.06 --> 00:03:15.01
We're going to make this take 75
seconds, so 75s, then a space.

64
00:03:15.01 --> 00:03:17.07
The type of animation
is going to be linear.

65
00:03:17.07 --> 00:03:19.03
Add another space.

66
00:03:19.03 --> 00:03:21.03
And then we want this
to continuously loop,

67
00:03:21.03 --> 00:03:23.02
so we're going to use
the infinite property.

68
00:03:23.02 --> 00:03:28.01
So, I'll type infinite then a semicolon.

69
00:03:28.01 --> 00:03:30.06
With these in place
we'll save our CSS again,

70
00:03:30.06 --> 00:03:31.09
go back to the browser,

71
00:03:31.09 --> 00:03:33.06
and we'll now see that we
have our clouds animating

72
00:03:33.06 --> 00:03:36.01
in the background.

73
00:03:36.01 --> 00:03:37.07
And so if you'd like to
see additional courses

74
00:03:37.07 --> 00:03:39.07
that deal with CSS animation,

75
00:03:39.07 --> 00:03:42.01
check out animating a
sprite sheet with CSS

76
00:03:42.01 --> 00:03:44.02
or looping a CSS animation.

77
00:03:44.02 --> 00:03:46.03
Both are available here in the library

78
00:03:46.03 --> 00:03:49.02
in the course entitled Creating Web Media.

79
00:03:49.02 --> 00:03:51.03
And so with that I'll
conclude this episode,

80
00:03:51.03 --> 00:03:54.03
and as always, thanks for watching.