CSSのtransitionを使ってhoverでじんわり表示を切り替える方法

マウスカーソルを合わせるとじんわり文字や背景の色が変わったりさせるためにはCSSの transition を使います。

他にもチェックボックスにチェックしたら画像がじんわり切り替わるなどもできます。

transitionは表示状態が切り替わるときにゆっくりじんわり変化させるときに使います。

CSSのtransitionとは

transitionは遷移という意味です。

画面を遷移するのではなく、CSSなので表示状態を別のものに変化させる意味になります。

通常は表示の切り替えはパッと一瞬で切り替わります。

例えばリンクにマウスをあわせると文字の色がパッと変わりますね。

この切り替わりの方法を指定するのが transition プロパティになります。

例えば、

#item { transition: 1.5s; }

1	#item { transition: 1.5s; }

のように書けば、#itemの要素に変化が加わったときに1.5秒かけて変化するようになります。

transitionはCSS3で追加された機能で、対応していないブラウザがあるかもしれません。

その場合は以下のように書きます。

transition: 1.5s;
-webkit-transition: 1.5s; /* Chrome、Safari用 */
-moz-transition: 1.5s; /* Firefox用 */
-o-transition: 1.5s; /* Opera用 */

transition: 1.5s;

-webkit-transition: 1.5s; /* Chrome、Safari用 */

-moz-transition: 1.5s; /* Firefox用 */

-o-transition: 1.5s; /* Opera用 */

-webkitとか-mozは簡単に説明すると、ブラウザを作った会社がCSS3の機能を予想して先行してブラウザに反映させるために追加した機能です。

transitionを使ってhoverでじんわり表示を切り替えるコード

HTML

<div id="area1" class="area">エリア1</div>
<div id="area2" class="area">エリア2</div>

1 2	<div id="area1" class="area">エリア1</div> <div id="area2" class="area">エリア2</div>

CSS

<style type="text/css">
.area {
	background-color: #ec9d9d;
	padding: 2%;
	margin-bottom: 1%;
	width: 300px;
}
.area:hover {
	background-color: #1870bc;
	color: #fff;
}
#area2 {
	transition: 1.5s;
	-webkit-transition: 1.5s;
	-moz-transition: 1.5s;
	-o-transition: 1.5s;
}
</style>