Learning Web Design, 5th Edition

18. Transitions, Transforms, and Animation

18

Transitions, Transforms, and Animation

In This Chapter

Creating smooth transitions

Moving, rotating, and scaling elements

Combining transitions and transforms

A few words about 3-D transforms

Keyframe animations

We’ve seen CSS used for visual effects like rounded corners, color gradients, and drop shadows that previously had to be created with graphics. In this chapter, we’ll look at some CSS3 properties for producing animated interactive effects that were previously possible only with JavaScript or Flash.

We’ll start with CSS Transitions, a nifty way to make style changes fade smoothly from one to another. Then we’ll discuss CSS Transforms for repositioning, scaling, rotating, and skewing elements and look at how you can animate them with transitions. I’m going to close out the chapter with brief introductions to 3-D Transforms and CSS Animation, which are important to know about but are too vast a topic to cover here, so I’ll give you just a taste.

The problem with this chapter is that animation and time-based effects don’t work on paper, so I can’t show them off right here. I did the next best thing, though, and made the source code for the figures available in the materials for this chapter (learningwebdesign.com/5e/materials) in a folder called figures. Just open the file in your browser.

Ease-y Does It (CSS Transitions)

Picture, if you will, a link in a navigation menu that changes from blue to red when the mouse hovers ...