2h 25m – Intermediate
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