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 3D 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 you can interact with most of the figures in this chapter online at www.learningwebdesign.com/4e/chapter17/figures.html.
Picture in your mind, if you will, a link in a navigation menu that changes from blue to red when the mouse hovers over it. The background is blue...mouse passes over it...BAM! Red! It goes from state to state instantly, with no states in between. Now ...