Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-46. Animated Fake Background Images
body:hover img#benmore, body:hover img#tekapo, body:hover img#lindis { opacity: 0.6; }
Again, you’d typically use keyframe animation if you wanted the sequence to loop regardless of user activity.
Alternatively, you could create the same effect by using generated content. This has the advantage of
requiring no extra markup, but imposes a limit of two added elements (one generated by using :before, one by
using :after). As demonstrated earlier, these elements also can also be transformed, given z-index and opacity.
Summary
In this chapter you’ve learned how to cross-fade two images using CSS3 transitions with opacity and CSS4 cross-
fade. You also created a simple image gallery—useful in many site contexts—and progressively enhanced the
gallery with transitions. I’ve shown you how to initiate those transitions using several different pseudo-selectors
(:target, :active, and :hover), each of which will be appropriate to certain presentations.
You’ve animated the captions for images and, within this context, displaced the axis of transformation to
create “offset” rotations.
The Transitions module has several means of delaying sequences to create layered animation effects,
from the straightforward (transition-delay) to hacks such as providing extremely high time values to hold
transitioned elements in place effectively for eternity. You use these same techniques to create different in-and-
out effects in transitioning elements, which normally simply reverse in the same animation order they came in.
Finally, you’ve pushed transitions into areas that most developers barely tread: the animation of generated
content and moving background images on page load.
In the next chapter, I’ll show you how to apply CSS3 transitions to website navigation and other user
interface features.