CSS: Transitions and Transforms

with Joseph Lowery
please wait ...
CSS: Transitions and Transforms
Video duration: 0s 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


- [Voiceover] Hi, I'm Joe Lowery and welcome to CSS Transitions and Transforms. With robust and ever increasing browser support, the CSS 3 transition revolution is upon us. This course, will cover the range from simple to complex transitions with full exploration of the 2D and 3D transforms. In the two day realm, I'll show you how to dynamically change colors as well as opacity so you can fade page elements in and out. We'll also explore altering the width and height of a project as well as rotating it.

Then we'll dive into the deep world of 3D transformations. Including multi dimensional rotation, rescaling 3D objects and changing perspectives. We'll pull a number of techniques together to build a very cool custom slide carousel. And round out the course with a look at how to speed your transition work and specific tools. Including the best online tools as well as Dreamweaver. Alright, let's get going with CSS Transitions and Transforms.

please wait ...