CSS3 Pushing the Limits

Chapter 6

Bringing 2D Transforms to Life with Transitions

You no doubt grew fed up with my persistent reminders throughout the preceding chapter that the true power and versatility of CSS transforms is only really achieved when they are animated. Well, unsurprisingly, this chapter outlines how to do just that. But not with JavaScript…with pure CSS! CSS3 Transitions, to be precise.

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.

Introducing CSS Transitions

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 ...