HTML and CSS Reference
In-Depth Information
FIGURE 5.21
A CSS Transition
is used to smoothly animate
between “closed” and “open”
footer states for the Monty
Python blog example.
And that's pretty much a wrap for this example and for transitions. With a bit of
modification, you could use this example to create a real-world, useful bar graph or
perhaps a question page where hovering over the question will reveal the answer.
Yo u c of u l d u s e s of m e of f t h e of t h e r t i m i n g f u n c t i of n s t of m a k e a t r a n s i t i of n of f a d u c k
moving through water, slowing down as it goes, or a ball falling through the air,
gaining speed due to gravity. The other task I tend to use transitions for, beyond
the examples you've already seen throughout this chapter, is making information
boxes appear. You can see a great example of this on the Monty Python King Arthur
example blog-site.html page if you hover over the “More details (+)” lines at the
bottom of each blog post summary. The opacity and height of the footer increase,
revealing expanded blog post information (
Figure 5.21
).
