マウスを乗せたときと外したときでtransitionの内容を変える方法
CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。

以前、「CSSで画像リンクにマウスを乗せたときの動きを考えてみた」という記事の中で、擬似要素を作った半透明のボックスが左から右へすり抜けることで光っているような感じにしたものを紹介しました。
ここで紹介したサンプルではマウスを外したときに右にいったボックスが左に戻るわけですが、光るのはマウスを乗せたときだけの方がいいと思います。
当時はいい方法が思いつかなかったのですが、方法が思いついたので紹介します。
まず、そのときに紹介したのが下になります。
で、戻ってこないようにしたものが下になります。
マウスを外したときにtransitionさせないようにするには
a {transition: 1s;}と指定した場合はマウスを乗せたときも外したときもtransitionは適用されますが、a:hover {transition: 1s;}と指定した場合はマウスを乗せたときだけしかtransitionは適用されません。
a { transition: 1s; } a:hover { transition: 1s; }右側はマウスを外した瞬間に元に戻りますね。
この仕組みを利用したわけです。hover側にtransitionを指定するという考えがなかったので当時は考えつきませんでした。
:hover有り無し両方に指定
では、:hover有り無しの両方でtransitionを指定した場合はどのようになるのか。下のリンクにマウスを乗せてみてください。
a { transition: 1s; } と a:hover { transition: 3s; }これは、a {transition: 1s;}、a:hover {transition: 3s;}という風に指定しています。この場合、マウスを乗せたときは3秒かけて変化し、マウスを外したときは1秒かけて元に戻ります。
ということで:hover有り無しの両方で「transition」を指定した場合、以下のようなことがいえます。
- :hoverなしはマウスを外したとき
- :hoverありはマウスを乗せたとき
反対ではないかと思われる方もいるかもしれませんが、:hoverありがマウスを乗せたときになります。
「CSSで作ったドロップダウンメニューのドロップの動きいろいろ」という記事で最後に紹介したパタパタ開閉するメニューはこの方法を使っています。
それを簡単にしたものを下に用意しました。Chrome、Firefox、IE10以上が対応しています。
マウスを乗せると上から開いて、マウスを外すと下から閉じます。transition関係だけ取り出すとCSSはこんな感じになります。
ul li ul li{ transition: .2s; } ul li:hover ul li:nth-child(1) { transition-delay: 0s; } ul li:hover ul li:nth-child(2) { transition-delay: .2s; } ul li ul li:nth-last-of-type(1) { transition-delay: 0s; } ul li ul li:nth-last-of-type(2) { transition-delay: .2s; }
transition-delayの値を、リストの順番やマウスを乗せたとき外したときで変えています。
さいごに
ということで、マウスを乗せたときと外したときで違うようにtransitionさせる方法を紹介しました。
擬似要素や:nth-child(n) などと組み合わせると複雑なアニメーションも可能になりますので、色々と面白いものが作れそうです。
意外と知らなかった人もいるのではと思ったので記事にしてみました。お役に立てばうれしいです。

コメントを書くのは初めてなのですが、一つ気になったことがあったので…。
写真の右からゆっくりhoverすると、右端に白いボックスが残ることがあるようです。
何回かに一回の割合なので気にしなくてもいいのかもですが、最初にhoverしたときにたまたまその状態になり、「なんか白いものが…」と気になったので…。
以前の記事と今回の記事の両方で確認できました。
頻度としては以前の記事の方が少しだけ発生する確率が高かったように思います。
(こちらの環境はMac OS、Safariです。)
とりいそぎ、ご報告まで。