つばろぐ

主に C#, .NET, Azure の備忘録です。たまに日記。

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

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

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

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

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

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

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

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