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
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.
Picture, if you will, a link in a navigation menu that changes from blue to red when the mouse hovers ...