CSSの”Transition”だけでサクッと。オンマウス（hover）でフワッと色を変える簡単テク

CSS3から登場したプロパティ「transition」を使う

テキストや画像に張ったリンクを認識しやすくするために、マウスオーバーすると文字や背景の色を変えたりテキストにアンダーラインなどの修飾を施したりすることって多いですよね。
コレそのままCSSの”:hover”で指定するだけだと、マウスオーバーさせた途端にパキッと状態変化させられてしまいます。

こんな感じ。

ま、それもいいんすけど、う～ん、どうもチープ(笑)

これをAからBにフワッと動的に変化させたいなぁなんて思うと、CSS3が登場するほんの数年前まではこれを表現するためにごにょごにょとjQuery、JavaScriptを読み込んでスクリプトに操作してもらったりする必要もあったりして、意外にめんどくさかったんです。

ところがCSS3にはtransitionっていう頼もしいプロパティが登場してくれました♪

transitionはtransition-propery、transition-duration、transition-timing-functonのtransition系を一括指定できるプロパティで、もちろんそれぞれを個別に指定する方法でも同じように目的は実現できます。

transitionでフワッと変化させる簡単な例

当サイトのサイドバーのリンクなどでも実際に使っているtransition効果について、簡単なサンプルを作ってみます。

HTML

<div class="test"><a href="#">テストのボタン</a></div>

CSS

.test a{
/* 背景色や文字色はお好みに合わせて指定してください。 */
display:block;
color:#000;
width:180px;
height:40px;
text-align: center;
line-height:40px;
background-color:azure;
/* */
}

.test a:hover{
/* 変化させる背景色や文字色、文字修飾もお好みに合わせて指定してください。 */
	color:#fff;
	background-color:gold;
	text-decoration:underline;
/* */
transition:0.5s;/*0.5秒かけて変化させる！ってこと*/
}

フワッと変化させるために追加してるコードはCSS19行目のtransitionだけです。

上のHTMLサンプルコードではdivタグで括ってdisplay:blockでボタン風に表示させてますが、そのままインライン要素としてテキストだけ修飾して表現したり、ul,olのli要素としてリスト表示したりすることでも何でもできます。

あと、transitionはIEはバージョン10以降で対応なので古いブラウザだと正しく表示されませんが、フワッと表示する部分が機能しないだけなので特に問題はないかと^_^;

transitionを適用した表示サンプルはこちら。

たった一行のプロパティを追加するだけで、何かスゴくリッチな表示になった感じでしょ？

表示時間を変えてみたり、他のプロパティもイジってみたりして、ご自身のサイトにフィットした表現方法を楽しんでみてください。