CSS3では、transitionプロパティを利用してアニメーションを設定することができます。たとえば、ナビゲーションバーのリンクはカーソルを重ねると色が青色に代わります。このとき、通常はすぐに色が変わりますが、アニメーションの機能を利用することにより、少しずつ色が変わるように設定することができます。
リンクにアニメーションを設定するには、nav ul li a{～}にtransitionプロパティを追加し、値を「1s」と指定します。これで、リンクにカーソルを重ねると少しずつ色が変わり、1秒かけてnav ul li a:hover{～}で指定した青色の表示に変化します。
/* メニュー */
…略…
nav ul li a {display: block;
width: 120px;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
border-right: solid 1px rgba(255,255,255,0.2);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
background-color:rgba(1,122,205,0)}
nav ul li a:hover {background-color: rgba(1,122,205,0.3)}
transitionプロパティにはベンダープレフィックスをつけて記述する必要があります。ここでは、Chrome、Firefox、Opera、Internet Explorer 10に対応するため、それぞれのベンダープレフィックスをつけた設定を記述しています。なお、Internet Explorer 9以前はtransitionプロパティに未対応です。
Internet Explorer 10でリンクの色をアニメーションで変化させるためには、カーソルを重ねていないときのリンクの色が必要です。そのため、nav ul li a{～}に「background-color:rgba(1,122,205,0)」を追加しています。なお、ここではrgba()の透明度を「0」と指定し、カーソルを重ねていないときのリンクの色が透明になるようにしています。