Web制作ラボ

【CSS】transitionの入れ先を間違うと、思った通りに動かない件 hover編

【CSS】transitionの入れ先を間違うと、思った通りに動かない件 hover編Web制作ラボ

CSSでアニメーションを付ける時にお世話になる「transition」

ご存知の通り、アニメーションでエレメントが変化する時に掛かる時間を指定するプロパティです。

画像やボタンの上にカーソルを乗せた時、ふわっと明るく表示させたい場合は、疑似クラスの「:hover」と組み合わせて使用することも多いです。

こん症状でお悩みの方は居ませんか?

カーソルを乗せた時はふわっと変化するのに、カーソルを離した時は一瞬で戻ってしまう。

今回はこの症状が起こる原因と、解決方法を解説します。

症状の確認

本来はこういう動きにしたい。

See the Pen
aboQyyy
by DoGgy (@DoGgy12)
on CodePen.

でも、何故かこういう動きに。

See the Pen
MWgzvOe
by DoGgy (@DoGgy12)
on CodePen.

どちらもカーソルをボタンの上に乗せた時は、ふわっと明るくなりますが、カーソルをボタンから離した時の挙動が違いますね。

上のボタンはカーソルをボタンから離した時に、ふわっと元の色に戻ります。
それに対し、下のボタンはカーソルを離すと一瞬で元の色に戻っているのがわかるかと思います。

【CodePenの使い方を解説】簡単に使えて学習効率アップ!
HTMLやCSS、JavaScriptを勉強している皆さんならば、以下の様な埋め込みを目にされた経験...

カーソルを離すと一瞬で戻ってしまう原因

さて、この挙動の違いですが、「transition」を記載するクラスの違いで発生します。

先ほどのCodepenで見て頂ければ一目瞭然ですが、以下の違いが有ります。

・ふわっと戻る場合の記載方法

.btn {
background-color: #5a4498;
color: white;
display:block;
width: 210px;
line-height: 50px;
text-align: center;
cursor: pointer;
transition: .5s;
}
.btn:hover {
background-color: #ae9ae5;

}

・一瞬で戻る場合の記載方法

.btn {
background-color: #5a4498;
color: white;
display:block;
width: 210px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.btn:hover {
background-color: #ae9ae5;
transition: .5s;
}

そうです。

transitionをbtnクラス内では無く、btn:hoverクラス内に記載しているのが原因です。

解決方法

先述の通りtransitionをhoverの親要素内に記載すれば解決です。

  • カーソルを離した時もtransitionを効かせたい ⇒hoverの親要素にtransitionを記載
  • カーソルを離した時にtransitionを効かせたくない ⇒hover内にtransitionを記載

今回は「カーソルを離した時にふわっと戻す」動きにしたいことを前提にお話ししました。
サイトのコンセプトによっては一瞬で元の画像に戻る方が良い場合もあるかと思います。

その場合はhover内にtransitionを記載すれば実現出来るという事ですね。

おわりに

私なんかは「transition(変化に掛かる時間)を指定したいクラスに記載する」とだけ覚えているので、記載する先がhoverなのか、その親要素なのか、という事をまったく意識していなかった訳です。

でもCSSってこういうトコ有るじゃないですか。(CSSのせいにする)

だからこそ、今回の様な細かいけど困った事を出来るだけ多く共有していきたいなーという想いがあります。

これからも、こういったネタを見つけてドンドン書いていきたいです。

トップページへ戻る