Pro CSS3 Animation

(Tuis.) #1
ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS

Your markup will consist of a container div, a checkbox input, and an inner div containing some content,
per Listing 4-33.


Listing 4-33. Checkbox Markup to Open and Close an Associated div





Mars
■ Note While the techniques I’ll discuss next are valid in html5 (which allows you to place form elements

anywhere on a page), they are semantically questionable. there is a school of thought that claims that form

elements should only be used within forms, and that these kinds of behaviors should be relegated exclusively to

JavaScript. You should be aware of this contention before proceeding with the following techniques.

Next, I will demonstrate how to achieve the image shown in Figure 4-8.

Figure 4-8. An image and description of Mars shown with an element clicked (image courtesy of NASA)