Learning Web Design, 6th Edition

Chapter 20. Transitions, Transforms, and Animation

20

Transitions, Transforms, and Animation

In This Chapter

Creating smooth transitions

Moving, rotating, and scaling elements

Combining transitions and transforms

Keyframe animations

In earlier chapters, you’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 properties for producing animated interactive effects that were previously possible only with JavaScript or animation tools like Flash (now obsolete).

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 those transformations. I’ll close out the chapter with brief introduction to CSS Animations, which are important to know about but too vast to cover fully here, so I’ll give you just a taste.

The problem with this chapter is that animations and time-based effects don’t work on paper, so I can’t show them off here. I did the next best thing, though, and made the source code for the figures available with the materials for this chapter (learningwebdesign.com/6e/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 whose background changes from blue to red when the mouse ...