読者です 読者をやめる 読者になる 読者になる

つばろぐ

福岡のエンジニアによる技術的な備忘録です。

CSSのtransition-durationプロパティでなめらかに要素の状態を変更する

CSS

マウスホバー時に対象の要素の状態をじんわり変更したい場合があります。
実装時に自分がハマって悩んでしまったので、メモ的にエントリーします。

Javascriptでも実現することはできますが、今回はCSS3を使用して実現します。
なおCSS3を使用していますので、モダンブラウザが対象となります。

要素の状態をじんわり変更するために使用するのはtransition-durationプロパティです。
詳しい使い方はこちらを参照して下さい。

ここで自分がハマってしまったのは、
「マウスホバー時に状態変化したいからdiv:hoverを使用する」ことでした。
div:hovertransition-durationプロパティを指定したサンプルがこちら。

マウスホバー時はきちんと時間をかけて状態変化されましたが、
マウスを離すと一瞬にして戻ってしまいます。
なぜでしょう?

これはマウスホバーでない状態(つまり普段の状態)に対してtransition-durationプロパティが指定されていないためです。
つまりdiv:hoverに対してではなく、divに対してtransition-durationプロパティを指定しなければなりません。
その場合のサンプルがこちら。

これでマウスホバー時/離した時の両方でなめらかに要素の状態を変更することができました。
ちなみに「マウスをホバーしていないとき」のことって何て呼ぶのがしっくり来るのでしょうか??