Chapter 4
CSS3 Transitions for UI Elements
Another obvious role for CSS3 transitions is enhancing user interface elements within web pages: building
animation into navigation, forms, and buttons, to make information on your site clearer and more engaging. In
this chapter I’ll take the animation principles and CSS syntax you’ve explored thus far and expand upon them in
lessons that will make your designs more interactive, interesting, and fun.
Modern Site Navigation Markup
Before adding transitions to your site navigation it’s worthwhile to take a moment and explore the markup
you’ll be hooking your CSS rules into. For HTML5 sites the primary navigation should be located within a
Listing 4-1. Minimal HTML5 Site Navigation Structure
■ Note You can learn more about ARIA landmark roles for accessibility at
http://www.w3.org/TR/wai-aria-practices/.
As you can see, HTML5 allows you to put a simple series of site links inside the nav element. You may
find, however, that adding markup increases the semantic value of the navigation while allowing you to modify
its appearance with greater flexibility. In most cases, site navigation can be treated as an unordered list;
alternatively, you might want to use an ordered list if the user will be expected to read pages in a particular order.
Whichever method you choose, keyboard shortcuts should also be added for primary links via the
accesskey attribute, as shown in Listing 4-2. (Note that the role attribute has moved to the unordered list.)
Listing 4-2. An Accessible Site Navigation Code Structure