この記事では、transitionについて解説します。
transitionは、要素をゆっくり変化させたい時に便利です。
と言っても、文字の説明だけでは分かりにくいですよね。
なので、さっそく具体例をあげていきます。
ご覧ください。
transitionを使った動き
まずは、下のボタンにマウスを乗せてください。
動きが違うはずです。
青いボタンにtransitionを指定してます。
こっちの方が、マウスを乗せた時に心地いいですよね？
この「ヌル〜」っとした動きを出すのがtransition。
俗に言う、アニメーションです。
視覚上のぎこちなさを、減らすために指定します。
transitionはhoverとセットで使う
上記で見たとおり、transitionはhoverとセットで使います。
マウスを乗せた時ですね。
ここを押さえて、transitionの指定方法を見てみましょう。
transitionの指定方法
transitionの指定方法は、こちら。
要素 {
transition: all 0.5s 1s ease-in-out;
}
/* transition: (対象のプロパティ)(変化にかかる時間)(変化の開始時間を遅らせる)(変化する速度を変える) */
コメントが長くなりました…
それに、指定を見ても分かりづらいかと。
なので、以下を例に解説します。
a {
color: #fff;
background-color: #4fbff1;
box-shadow: 0 3px 5px -1px #999;
transition: all 0.5s 1s ease-in-out;
}
a:hover {
box-shadow: none;
}
/* 幅や高さの指定は省略してます */※マウスを乗せて1秒待って！
変化させてるのは、影。
box-shadow: noneで影を消します。
この変化をゆっくりにするため、transitionを指定。
こちらが、指定内容を説明したもの。
| all | 0.5s | 1s | ease-in-out | |
|---|---|---|---|---|
| transition | 対象のプロパティ | 変化にかかる時間 | 変化の開始時間を遅らせる | 変化する速度を変える |
| box-shadowに | 0.5秒かけて | マウスを乗せた1秒後に | 開始と終了をゆっくり |
無理やり一言でまとめたのが、こちらです。
「マウスを乗せた1秒後に、0.5秒かけ影が消える。しかも開始と終了の変化はゆっくりに。マウスを外した時も、この変化のとおり影が現れる」
【参考記事】box-shadowの指定方法｜影やぼかしを作る
マウスを外した時
乗せたマウスを外した時も同じような変化をさせます。
ここ、だいじなポイントです。
マウスを乗せた時はゆっくり。
けれど、マウスを外した時にカクカクすると、気持ちよさが半減します。
少し裏切られた気分にさせるのが、以下のボタンです。
※マウスを乗せて1秒待って！
a {
color: #fff;
background-color: #4fbff1;
box-shadow: 0 3px 5px -1px #999;
}
a:hover {
box-shadow: none;
transition: all 0.5s 1s ease-in-out;
}上記は、「マウスを乗せる時だけ、ヌル〜っとした動きになる」の指定になります。
カクカクするのは、hoverにtransitionを指定したから。
transitionの指定は、あくまでhoverする前の要素に対して行います。
変化させるプロパティを限定
再び、例をあげます。
マウスを置いてください。
背景色はパッと変わったのに、文字色はゆっくりですね。
コードはこちら。
a {
color: #ffa4bb;
background-color: #f7f4e9;
box-shadow: none;
transition: color 1s ease-in-out; /* 文字色だけ 1秒かけて はじめと終わりの変化をゆっくりと */
}
a:hover {
color: #f7f4e9;
background-color: #ffa4bb;
}transition: color 1s ease-in-outとしてます。
colorと指定したので、ヌルッと変化するのは文字色だけ。
今度は、transition: background-color 1s ease-in-outとします。
すると、背景色だけがゆっくり変化。
a {
transition: background-color 1s ease-in-out;
}※マウスを乗せてください。
allと書けば、a:hoverの中で指定したものすべてに適用されます。
※開始時間を遅らせる指定は省略できるので、ここでは指定してません。
結果を見ると、文字色と背景色ともにゆっくり変化。
a {
transition: all 1s ease-in-out;
}※マウスを乗せてください。
変化する速度の値は、ease-in-out以外にもあります。
しかし、ease-in-outを使うケースが多いので、まずこれを覚えましょう。
ゆっくり消える、ゆっくり現れる
さいごに、要素をゆっくり消してみます。
要素の非表示にはnoneとopacityがあるので、それぞれご覧ください。
display: noneではゆっくり消えない
まずは、display: noneを指定。
以下でマウスを置いてください。
a {
color: #ffa4bb;
background-color: #f7f4e9;
transition: all 1s ease-in-out; /* 文字色だけ 1秒かけて はじめと終わりの変化をゆっくりと */
}
a:hover {
display: none;
}ご覧のように、display: noneではゆっくり消えません。
それにボタンが消えた時、「ご覧のように、〜」がせり上がったはずです。
要素が存在していないと見なされるのでdisplay: noneだと、こうなります。
【参考記事】ブロック要素とインライン要素の違いの「none」
※クリックすると該当箇所にジャンプします。
opacityを使うとゆっくり消える
ゆっくり消すには、opacityを使います。
マウスオンしてください。
a {
color: #ffa4bb;
background-color: #f7f4e9;
transition: all 1s ease-in-out; /* 文字色だけ 1秒かけて はじめと終わりの変化をゆっくりと */
}
a:hover {
opacity: 0;
}ゆっくり消え、ゆっくり現れますね。
しかもopacityでは、ボタンが消えても下のテキストがせり上がってきません。
opacityは透明人間みたく、存在はしてるのに見えないといった状態だから。
【参考記事】画像を透過させるopacity
参考サイト
この記事は、CSS3をもとに書きました。
CSS3とはcssのルールブックみたいなもので、その最新版です。
どちらも翻訳ありです。
ややむずかしめに書かれてるので、お時間ある方だけどうぞ。
まとめ
今回は、transitionについて解説しました。
transitionを使って、動きに変化をつけてみましょう。
コードを書くのが楽しくなるはずです。
こちらは、マウスオンで画像が透過する記事になります。
ご覧ください。
