Craig CampbellAug 23, 2013

FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

Overview
Transcript

4.7 Animating the Fences

With the pig animation finished, it's time to animate the fences in the background. In this lesson we create a seamless loop for the fences that will complete the animation.

1.Introduction
1 lesson, 01:26

2.3D Transitions
2 lessons, 19:55

2.1
A Primer on Transitions
09:50

3.Project 1: 3D Transitions
8 lessons, 55:56

3.1
Filling in the HTML (3D Transitions)
06:35

3.3
Using Perspective in WebKit Browsers
06:13

3.4
Animated 3D Mouseovers
07:06

3.5
Fallback for Non-WebKit Browsers
03:47

3.6
Animating from Beginning to End
08:14

3.7
Animation Properties
09:09

3.8
Adding Keyframes in Between
06:16

4.Project 2: Advanced Looping Animation
7 lessons, 54:11

4.1
Preparing Images for Animation
11:42

4.3
Placing Images with CSS
10:27

4.6
Animating the Tail and Ear
04:47

4.7
Animating the Fences
08:18

5.Conclusion
1 lesson, 01:04

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

craigsoup

Advanced CSS3 Animations

Next lesson playing in 5 seconds

4.7 Animating the Fences

1.Introduction
1 lesson, 01:26

1.1
Introduction
01:26

2.3D Transitions
2 lessons, 19:55

2.1
A Primer on Transitions
09:50

2.2
3D Transformations
10:05

3.Project 1: 3D Transitions
8 lessons, 55:56

3.1
Filling in the HTML (3D Transitions)
06:35

3.2
Styling the Page
08:36

3.3
Using Perspective in WebKit Browsers
06:13

3.4
Animated 3D Mouseovers
07:06

3.5
Fallback for Non-WebKit Browsers
03:47

3.6
Animating from Beginning to End
08:14

3.7
Animation Properties
09:09

3.8
Adding Keyframes in Between
06:16

4.Project 2: Advanced Looping Animation
7 lessons, 54:11

4.1
Preparing Images for Animation
11:42

4.2
Filling in the HTML
06:45

4.3
Placing Images with CSS
10:27

4.4
Animating the Legs
07:48

4.5
Animating the Body
04:24

4.6
Animating the Tail and Ear
04:47

4.7
Animating the Fences
08:18

5.Conclusion
1 lesson, 01:04

5.1
Final Thoughts
01:04

Advanced CSS3 Animations

Next lesson playing in 5 seconds

4.7 Animating the Fences

1.Introduction1 lesson, 01:26

2.3D Transitions2 lessons, 19:55

3.Project 1: 3D Transitions8 lessons, 55:56

4.Project 2: Advanced Looping Animation7 lessons, 54:11

5.Conclusion1 lesson, 01:04

1.Introduction
1 lesson, 01:26

2.3D Transitions
2 lessons, 19:55

3.Project 1: 3D Transitions
8 lessons, 55:56

4.Project 2: Advanced Looping Animation
7 lessons, 54:11

5.Conclusion
1 lesson, 01:04