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

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を勉強している皆さんならば、以下の様な埋め込みを目にされた経験が一度はあるはず。See th...

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

さて、この挙動の違いですが、「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クラス内に記載しているのが原因です。