CSS Transitionsを使ってhover時の演出をつけてみる

前回はポータルサイトのレスポンシブWebデザイン化について書いてみましたが、各ゲームサイトでもいろいろ試していたりします。今回は『リリリズム』のサイトで使用したCSS Transitionsの話です。 lili-navi

CSS Transitionsでアニメーションさせる

アニメーションといってもいろいろ手法があるかと思いますが、今回は単純なアニメーションなので、メンテナンスしやすいCSS Transitionsを使用しています。

各ブラウザでの対応

CSS3は、特に各ブラウザで対応状況が異なります。 (私はよくCSS3 & HTML5 Browser Supportのサイトを参照しています。) 今回使うCSS Transitionsは、IE9以下ではサポートしていません。ただレイアウトが崩たり、内容が閲覧できなくなる…といった影響があるわけではありませんので、 IE9以下の対応は特にせず実装することにしました。（プログレッシブエンハンスメントという考えですね！）

cssサンプル

実際にアニメーションするところだけ抜粋しています。今回はナビゲーションにマウスをのせた際に変更して欲しいので、下記のような形で少し強引ではありますが、高さを変化させています。 transition-CSS3リファレンス

#mainnavi li a{
	height:80px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
#mainnavi li a:hover{
	margin:5px 0 0 0;
	height:75px;
}

実装完了

今回は単純に位置を少し下にずらすだけでしたが、 CSS Transformsとあわせて使うと回転・拡大…と幅も広がります。今回は画像での動き+CSS Transitionsでなかなかかわいらしい動きがつくれたのではないかなと思います。
実際の動作はサイトより確認してください。 peakvox リリリズム