Lessons:19Length:2.2 hours
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.1Introduction01:26
1.1
Introduction
01:26
2.3D Transitions
2.1A Primer on Transitions09:50
2.1
A Primer on Transitions
09:50
2.23D Transformations10:05
2.2
3D Transformations
10:05
3.Project 1: 3D Transitions
3.1Filling in the HTML (3D Transitions)06:35
3.1
Filling in the HTML (3D Transitions)
06:35
3.2Styling the Page08:36
3.2
Styling the Page
08:36
3.3Using Perspective in WebKit Browsers06:13
3.3
Using Perspective in WebKit Browsers
06:13
3.4Animated 3D Mouseovers07:06
3.4
Animated 3D Mouseovers
07:06
3.5Fallback for Non-WebKit Browsers03:47
3.5
Fallback for Non-WebKit Browsers
03:47
3.6Animating from Beginning to End08:14
3.6
Animating from Beginning to End
08:14
3.7Animation Properties09:09
3.7
Animation Properties
09:09
3.8Adding Keyframes in Between06:16
3.8
Adding Keyframes in Between
06:16
4.Project 2: Advanced Looping Animation
4.1Preparing Images for Animation11:42
4.1
Preparing Images for Animation
11:42
4.2Filling in the HTML06:45
4.2
Filling in the HTML
06:45
4.3Placing Images with CSS10:27
4.3
Placing Images with CSS
10:27
4.4Animating the Legs07:48
4.4
Animating the Legs
07:48
4.5Animating the Body04:24
4.5
Animating the Body
04:24
4.6Animating the Tail and Ear04:47
4.6
Animating the Tail and Ear
04:47
4.7Animating the Fences08:18
4.7
Animating the Fences
08:18
5.Conclusion
5.1Final Thoughts01:04
5.1
Final Thoughts
01:04
