マウスカーソルを合わせるとじんわり文字や背景の色が変わったりさせるためにはCSSの transition を使います。
他にもチェックボックスにチェックしたら画像がじんわり切り替わるなどもできます。
transitionは表示状態が切り替わるときにゆっくりじんわり変化させるときに使います。
CSSのtransitionとは
transitionは遷移という意味です。
画面を遷移するのではなく、CSSなので表示状態を別のものに変化させる意味になります。
通常は表示の切り替えはパッと一瞬で切り替わります。
例えばリンクにマウスをあわせると文字の色がパッと変わりますね。
この切り替わりの方法を指定するのが transition プロパティになります。
例えば、
#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用 */
-webkitとか-mozは簡単に説明すると、ブラウザを作った会社がCSS3の機能を予想して先行してブラウザに反映させるために追加した機能です。
transitionを使ってhoverでじんわり表示を切り替えるコード
HTML
<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>
解説
.area{}は、初期の表示状態です。
背景がピンクいブロック要素を用意しました。
.area:hover{}は、マウスカーソルが要素の上に来たときの表示状態です。
:hoverという擬似クラスを使うことでマウスがあたっている場合を指定できます。
CSSの内容は背景を水色にして文字を白にしました。
ここまでは普通です。
この状態で.areaのブロック要素にマウスをあてるとパッと背景と文字の色が変わります。
#area2{}で #area2 に表示切替時には1.5秒かけますということを指定します。
#area1はtransitionを指定していないのでパッと切り替わります。
[btn class=”simple”]transitionのサンプル[/btn]
まとめ
初期状態はhoverなどで表示を切り替えた場合は一瞬で切り替わる。
じんわりゆっくり切り替えるためにはCSSでtransitionを指定する。
コメント