This chapter begins by discussing transitions in great detail, describing how you can harness their full power to produce the most impressive effects. I then show you how to take 2D transforms to the next level by combining them with transition effects, addressing how each transform function can benefit. To finish, I walk you through the process of creating a fully functional scattered image gallery, using nothing but CSS3.
As with transforms, transitions are an extremely powerful addition to CSS and add a brand new dimension to its capabilities in the form of animation.
Don't confuse CSS transitions with the completely separate CSS Animation module; they are entirely different beasts. The Animation module is much more extensive, complex, and capable, and is covered in detail in Chapter 9.
So what are CSS transitions, and how do they differ from CSS animation? In short, transitions ensure that when an element changes from one state to another (such as a hover effect), this change is animated, or transitioned, over a set duration.
In keeping with the theme raised in the ...