FREELessons: 19Length: 2.2 hours
Animating an object on your website can be complex work, and doing more advanced movements using CSS3 can be trickier. Fortunately, Craig Campbell is here to take you through advanced CSS3 animations.
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
