css3 でメニューのアニメーション

CSS Transitions Module Level 3
5.2 Properties from SVG

CSS3 では transition やら transform やら animation などが定義され、個人的には懐かしい SVG ライクな感じになっている。実際、SVG のプロパティも移植？されているみたいだし、W3C は SVG を CSS に組み込んで、普及を託したような感じを受ける。
以前働いていた会社では SMIL や SVG についてやっていた（2003〜2004 年頃）が、そのときはまともな文書は W3C しかなく、書籍はあるにはあったが簡単な触りの部分しか載ってなかったりして、相当難儀した。しかし CSS に組み込まれるとなると、おそらく色々な書籍が今後出るだろうし、大きく普及する可能性を秘めていると思われる。

さて、そんな SVG 譲りの定義から transition を用いて、ナビにマウスを合わせたらサブ項目がスルスルと現れるアニメーションも可能になる。パッパッと開閉するようなのは CSS 2.1 でも当然可能だが、ダイナミックさに欠ける気がする。ちなみに、Firefox 用と Opera 用の記述でも試したが効果を得られなかったので、いつものように webkit のみの記述だけを書いてみる。

--- html 側 ---

<div id="nav">
  <div>nav</div>
  <a href="#" title="link1">link1</a>
  <a href="#" title="link2">link2</a>
  <a href="#" title="link3">link3</a>
</div>

--- css 側 ---

#nav {
  width: 100px;
  height: 20px;
  padding: 0px 3px 0px;
  overflow: hidden; /* 通常はサブ項目が隠れている */
  background-color: #ddeeff;
  border: 1px solid #0066ff;
  -webkit-transition: height 0.5s ease-out;
    /* ↑高さを変更、0.5 秒、最後をゆっくり */
}
#nav:hover {
  height: 80px; /* overflow を再定義しなくても現れる */
}
#nav a {display: block;}

html5 や css3 に対応するブラウザが早く普及してほしい。MS がブラウザ開発を放棄しなければ無理かもしれないが。