css3マウスオーバーアニメーションの基本

マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。
たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。

css

 
	a {
		color: #3399FF;
	}
	a:hover {
		color: #FF6600;
	}
	

これをアニメーションさせるには「transition」というプロパティを追加します。

transition: プロパティ名　時間　アニメーション方法 ;

最初のプロパティ名はアニメーションさせるプロパティを指定します。「all」とすれば「hover」で設定したすべてのプロパティがアニメーションされます。
時間は何秒でアニメーションさせるか、アニメーション方法は「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定することで動きの変化をさせることができます。

で、「transition」を追加すると以下のようになります。
ゆくゆくは統一されるのでしょうが、現状では「transition」の前に各ブラウザに対応するためにベンダープリフィックスと呼ばれる接頭辞を入れる必要があります。

css

 
	a {
		color: #3399FF;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
	}
	a:hover {
		color: #FF6600;
	}
	

これだけで動くんです。簡単ですね。

1.背景色がアニメーションするナビゲーション

最初は背景色のアニメーションです。
htmlはすべて共通で以下のようなリストを使用します。

html

 
	<ul id="nav1"> 
		<li class="b1"><a href="#">HOME</a></li> 
		<li class="b2"><a href="#">ABOUT</a></li> 
		<li class="b3"><a href="#">GALLERY</a></li> 
		<li class="b4"><a href="#">LINK</a></li> 
	</ul> 
	

リストにb1などのクラス名が付いているのは次以降の装飾のためですので気にしないでください。

css

 
	ul#nav1 li a {
		display: block;
		width: 130px;
		background-color: #fff;
		float: left;
		padding: 5px;
		text-align: center;
		border: solid 1px #999;
		margin-left: -1px;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		font-weight: bold;
	}
	ul#nav1 li a:hover {
		background: #ff9900;
	}
	

2.横からスライドするナビゲーション

次は横からアニメーションするやつです。
装飾のためにちょっと長くなってますが、「margin-left」をアニメーションさせるだけですね。

css

	ul li.b1 a { background: #FF9933; }
	ul li.b2 a { background: #00CCFF; }
	ul li.b3 a { background: #33CC66; }
	ul li.b4 a { background: #FF84D7; }
	ul#nav2 li {
		margin-bottom: 10px;
	}
	ul#nav2 li a {
		font-weight: bold;
		display: block;
		margin-left: -200px;
		width: 300px;
		padding: 5px 20px 5px 0;
		color: #fff;
		text-align: right;
		-webkit-border-top-right-radius: 30px;
		-webkit-border-bottom-right-radius: 30px;
		-moz-border-radius-topright: 30px;
		-moz-border-radius-bottomright: 30px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
	}
	ul#nav2 li a:hover {
		margin-left: 0px;
	}
	

「b1」「b2」などの各カラー設定は次から共通で使用します。

3.拡大・縮小するナビゲーション

拡大縮小はwidthを動かしてもできますが、「transform: scale」を使用すると簡単です。

css

 
	ul#nav3 {
		height: 150px;
	}
	ul#nav3 li {
		float: left;
		margin-right: 30px;
		text-align: center;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
	}
	ul#nav3 li:hover {
		-webkit-transform: scale( 1.5 );
		-moz-transform: scale( 1.5 );
	}
	ul#nav3 li a {
		width: 100px;
		color: #fff;
		height: 100px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		border-radius: 800px;
		-moz-border-radius: 800px;
		-webkit-border-radius: 800px;
		font-weight: bold;
	}
	

4.くるりと奥に回転するナビゲーション

拡大縮小とほとんど変わりませんが「scaleX(-1)」とすることで回転します。
※Firefoxではちょっと微妙な動作をするようです。

css

 
	ul#nav4 {
		height: 150px;
	}
	ul#nav4 li {
		float: left;
		margin-right: 30px;
		text-align: center;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
	}
	ul#nav4 li:hover {
		-moz-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
	}
	ul#nav4 li a {
		width: 100px;
		color: #fff;
		height: 100px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		border-radius: 800px;
		-moz-border-radius: 800px;
		-webkit-border-radius: 800px;
		font-weight: bold;
	}
	

5.ぼやっと光るナビゲーション

文字がぼやっと光るやつは「text-shadow」をアニメーションさせます。

css

 
	ul#nav5 {
		background: #fff;
		padding: 20px 40px;
		width: 600px;
	}
	ul#nav5 li a {
		float: left;
		margin-right: 60px;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		font-weight: bold;
	}
	ul#nav5 li a:hover {
		text-shadow: #FFCC00 0px 0px 20px;
		color: #EA4515;
	}