【css】ゆっくり変化する|transition

【css】時間をかけて変化させるぅ|transition

今回は、ゆっくり変化させる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秒待って!

こんな動きになるのは、hovertransitionを指定しているから。

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で変化をつけると、楽しいんでやってみましょう!

以下は、マウスオンで画像が透過する記事です。

※記事の該当箇所にジャンプします。

タイトルとURLをコピーしました