今回は、ゆっくり変化させるtransitionについて解説！
ヌル〜っとした動きを作ります。
もう、さっそく見ていきましょう。
transitionの動き
まずは、下のボタンにマウスを乗せてください。
動きが違いますね。
青いボタンにtransitionを指定してます。
こっちの方がマウスを乗せた時に心地いいですよね？
この「ヌル〜」っとした動きを出すのがtransition。
巷で言う、アニメーションなるものかと。
ユーザーが「気持ちいい！！」と無意識に感じるための動きです。
hoverとセットで使う
transitionは、hoverとセットで使います。
ではでは、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を指定。
以下が、指定内容を説明したもの。
| transition | 対象のプロパティ(all) | 変化にかかる時間(0.5s) | 変化の開始時間を遅らせる(1s) | 変化する速度を変える(ease-in-out) |
| box-shadowに | 0.5秒かけて | マウスを乗せた1秒後に | 開始と終了をゆっくり |
無理やり一言でまとめると、
「マウスを乗せた1秒後に、0.5秒かけ影が消える(しかも開始と終了の変化はゆっくり)。マウスを外した時は、逆にこの変化のとおり影が現れる」
みたいな感じ。
こんな説明で分かってもらえましたか？
【参考記事】影とぼかしのbox-shadow
マウスを外した時
乗せたマウスを外した時も同じような変化をさせます。
ここ、だいじなポイントです。
マウスを乗せた時はいいけど、外した時にカクカクした動きだと、気持ちよさ感が薄れるので。
ちょっと裏切られた気分にさせるのが、以下のボタンです。
※マウスを乗せて1秒待って！
こんな動きになるのは、hoverにtransitionを指定しているから。
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;
}この指定だと、
「マウスを乗せる時だけヌル〜っとした動きになります」
って意味になる！
あっ、もちろん変化のさせ方は好みがあると思います。
ですので、そのへんはお好きなように調整してください。
変化させるプロパティを限定
もう1つだけ、例をあげます。
またまた、マウスを置いてみてください。
背景色はパッと変わったのに、文字色はゆっくりですね。
コードはこちら。
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を使うケースが多いので、とりあえずこれを覚えときましょ。
ゆっくり消える、ゆっくり現れる
オマケで、要素をゆっくり消してみます。
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ではこうなります。
opacityを使うとゆっくり消える
ゆっくり透明にするには、opacityを使います。
a {
color: #ffa4bb;
background-color: #f7f4e9;
transition: all 1s ease-in-out; /* 文字色だけ 1秒かけて はじめと終わりの変化をゆっくりと */
}
a:hover {
opacity: 0;
}どうでしょう。
フワッ、とまではいかなくても、ゆっくり消えてゆっくり現れますね。
ちなみにopacityでは、ボタンが消えても下にあるテキストがせり上がってきません。
こっちは、透明人間みたく、存在はしてるのに見えないといった状態だから。
というわけで、transitionについては以上となります。
【参考記事】ブロック要素とインライン要素の違いの「none」
※該当箇所にジャンプします。
参考サイト
この「transition」は、CSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
どちらも翻訳ありです。
やや専門家向けに書かれてるので、お時間ある方だけどうぞ〜
まとめ
今回は、transitionについて解説してきました。
hoverで変化をつけると、楽しいんでやってみましょう！
以下は、マウスオンで画像が透過する記事です。
※記事の該当箇所にジャンプします。