CSS3 animation can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML5, can be enhanced and animated with CSS3 in a way that gracefully degrades for older browsers.

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id attribute:

1. <nav>
2. <a href=“#“>Home</a>
3. <a href=“#“>About Us</a>
4. <a href=“#“>Products</a>
5. </nav>

We’ll add a background image and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image.

1. nav { background: url(clouds.jpg) no-repeat; padding: 1em 0; }
2. nav a { text-decoration: none; color: #fff; padding: 1em;
3. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
4. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); }

We’ll also add a hover state to the links, which brings in semi-transparent background:

1. nav a:hover { background: rgba(0, 0, 0, 0.7); }

Next, we’ll add an animation component to the default link state, to fade it in over time:

1. nav a { text-decoration: none; color: #fff; padding: 1em;
2. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
3. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
4. -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;
5. -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

You may notice a small gap between the background blocks of adjacent links. This is the same problem we encountered in our very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links:

1. <nav>
2. <a href="#“>Home</a><a href=“#“>About Us</a><a href=“#“>Products</a>
3. </nav>

The result: if the browser understands CSS3 animation, the background fades in and out behind each link on hover. If the browser does not understand CSS3, the visitor will still see a link background; it just lacks animation.

As a final note: the techniques we've discussed here could be applied to an XHTML page equally well; I have used HTML5 only for the purposes of illustration. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.