Tutorials > [Lynda.com] CSS Transitions and Transforms

[Lynda.com] CSS Transitions and Transforms


Date: 4 November 2012 | Posted by: pm1
[Lynda.com] CSS Transitions and Transforms

[Lynda.com] CSS: Transitions and Transforms
QuickTime (.mov) | AVC 960x540 15fps 200Kbps | AAC 48kHz 2ch 96Kbps | 460 Mb
Ex. files included | 2h 25m | 11 July 2012 | Software works on: Mac and Windows


With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.

Topics include:

Understanding transition basics
Working with 2D and 3D transforms
Animating color changes
Fading objects
Changing the size of page elements and fonts
Transitioning multiple properties at the same time
Understanding keyframes and animations
Working in the z-index
Adding javascript interactivity
Crafting transitions in Dreamweaver


Introduction 2m 18s
Welcome 1m 8s
About the exercise files 1m 10s
1. Understanding CSS Transitions and Transforms 20m 40s
Transition basics 3m 47s
Exploring transition options 4m 12s
2D transform fundamentals 4m 36s
Coding 3D transitions 5m 17s
Enhancing (and not degrading) the user experience 2m 48s
2. Simple 2D Transitions and Transforms 31m 8s
Animating color changes 7m 14s
Fading objects in and out 5m 24s
Growing page elements 6m 51s
Automatically spinning logos 8m 15s
Adjusting font sizes 3m 24s
3. Advanced 2D Transitions 18m 27s
Transitioning multiple properties 8m 55s
Understanding keyframes and animations 2m 15s
Animating smooth color transitions 7m 17s
4. Enhanced 3D Transitions and Transforms 32m 25s
Working in the z-index 6m 19s
Flipping cards in 3D 9m 39s
Creating an image cube 9m 43s
Animating the image cube 6m 44s
5. Project: Creating a Custom Slide Carousel 23m 47s
What we're going to build 3m 26s
Setting up the HTML 4m 22s
Adding javascript interactivity 7m 22s
Transitioning the images with CSS 8m 37s
6. CSS Transitions and Transforms in Tools 16m 14s
Exploring online transition and transform tools 7m 0s
Crafting transitions in Dreamweaver 9m 14s
Goodbye 18s
Next steps 18s



[Lynda.com] CSS Transitions and Transforms




 Download here
See full article